Sharepoint framework > reference to custom javascript

%3CLINGO-SUB%20id%3D%22lingo-sub-77073%22%20slang%3D%22en-US%22%3ESharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77073%22%20slang%3D%22en-US%22%3E%3CP%3EI%20try%20to%20convert%20an%20%22old%22%20content%20editor%20webpart%20to%20a%20SharePoint%20Modern%20webpart.%20My%20original%20script%20contains%20a%20few%20references%20to%20custom%20.js%20files.%20In%20my%20new%20solution%20I%20added%20this%20to%20my%20%22webpart.ts%22%20file%3A%3C%2FP%3E%3CPRE%3E%20%20%20%20require('.%2Fscript1')%3B%0A%20%20%20%20require('.%2Fscript2')%3B%0A%20%20%20%20require('.%2Fscript3')%3B%3C%2FPRE%3E%3CP%3EAdded%20all%20the%20files%20to%20the%20%22webparts%22%20directory.%20When%20I%20build%20I%20get%20errors%20%22Module%20not%20found%2C%20.....%22%3C%2FP%3E%3CP%3ELooks%20like%20this%20error%20fires%20when%20it%20sees%20code%20in%20script1%20refering%20to%20a%20function%20in%20script2.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAm%20I%20doing%20something%20wrong%20in%20my%20references%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%2C%20Mike%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-81937%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-81937%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3ETook%20some%20time%20but%20I%20figured%20it%20out.%20This%20is%20what%20I%20did%3A%3C%2FP%3E%3CP%3E1.%20No%20reference%20in%20the%20%22Config.json%22%3C%2FP%3E%3CP%3E2%20Changed%20my%20custom%20script%3A%3C%2FP%3E%3CPRE%3Evar%20CustomScript%20%3D%20function%20testFunction()%20%7B%0Aalert(%22test%22)%3B%0A%7D%3B%0A%0Amodule.exports%20%3D%20%7B%0A%20CustomScript%3A%20CustomScript%0A%20%7D%3B%3C%2FPRE%3E%3CP%3E3.%20in%20my%20.ts%20file%20did%20in%20the%20render%20method%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Econst%20MyCustomScript%3A%20any%20%3D%20require('.%2Fmyscript')%3B%0A%0AMyCustomScript.CustomScript()%3C%2FPRE%3E%3CP%3ENow%20my%20%22alert%22%20shows%20up.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77352%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77352%22%20slang%3D%22en-US%22%3E%3CP%3EYes%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EThis%20is%20my%20first%20test%20and%20I%20am%20not%20familiar%20with%20Typescript.%20What%20I%20try%20to%20do%20is%20get%20my%20test%20working%20and%20then%20step-by-step%20convert%20it%20to%20typescript.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77349%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77349%22%20slang%3D%22en-US%22%3E%3CP%3EIs%20there%20a%20reason%20why%20your%20not%20just%20migrating%20your%20scripts%20to%20TypeScript%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ESomething%20like%20this%20is%20easy%20to%20implement%20and%20closer%20to%20where%20you%20should%20want%20to%20be%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%3Eexport%20default%20class%20MyFunctionsTurnedIntoAClass%20%7B%0A%0A%20%20%20%20public%20oldfunction1()%20%7B%0A%20%20%20%20%20%20....%0A%20%20%20%20%7D%0A%0A%20%20%20%20public%20oldfunction2()%20%7B%0A%20%20%20%20%20%20%20%20....%0A%20%20%20%20%7D%0A%0A%20%20%20%20....%0A%7D%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77348%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77348%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F2387%22%20target%3D%22_blank%22%3E%40Pieter%20Veenstra%3C%2FA%3E%26nbsp%3Bnot%20yet%2C%20thanks%20for%20the%20suggestion.%3C%2FP%3E%3CP%3EFor%20the%20moment%2C%20I'm%20struggeling%20to%20get%20it%20working.%20%3B)%3C%2Fimg%3E%3C%2FP%3E%3CP%3EI%20use%20a%20%22%24(document).ready%22%20in%20my%20.js%20file.%20Looks%20like%20this%20is%20not%20executed...%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77343%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77343%22%20slang%3D%22en-US%22%3E%3CP%3EHi%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F3085%22%20target%3D%22_blank%22%3E%40Mike%20Jansen%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EYou%20could%20put%20those%20scripts%20anywhere%20(%20as%20long%20as%20they%20are%20accesible).%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHave%20you%20looked%20at%20the%20Azure%20CDN%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-77339%22%20slang%3D%22en-US%22%3ERe%3A%20Sharepoint%20framework%20%26gt%3B%20reference%20to%20custom%20javascript%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-77339%22%20slang%3D%22en-US%22%3E%3CP%3EAfter%20a%20day%20of%20searching%20and%20testing%2C%20i%20found%20this%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fblog.mastykarz.nl%2Fbundling-external-frameworks-sharepoint-framework-client-side-web-parts-bad-idea%2F%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fblog.mastykarz.nl%2Fbundling-external-frameworks-sharepoint-framework-client-side-web-parts-bad-idea%2F%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ELooks%20like%20my%20idea%20of%20bundling%20my%20javascripts%20file%20in%20the%20webpart%20is%20not%20the%20best%20approach.%20I%20know%20put%20them%20on%20my%20Sharepoint%20site%20(site%20assets)%20and%20referenced%20them%20in%20the%20%22config.json%22%20file.%20No%20more%20build%20errors%20so%20we%20are%20getting%20somewhere.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHowever%2C%20suppose%20I%20want%20to%20distribute%20my%20webpart%20to%20different%20tenants%2C%20what%20might%20be%20the%20best%20place%20to%20put%20my%20.js%20files%3F%20Azure%20somewhere%3F%20Or%20is%20there%20a%20better%20solution%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E
Regular Contributor

I try to convert an "old" content editor webpart to a SharePoint Modern webpart. My original script contains a few references to custom .js files. In my new solution I added this to my "webpart.ts" file:

    require('./script1');
    require('./script2');
    require('./script3');

Added all the files to the "webparts" directory. When I build I get errors "Module not found, ....."

Looks like this error fires when it sees code in script1 refering to a function in script2.

 

Am I doing something wrong in my references?

 

Thanks, Mike

6 Replies

After a day of searching and testing, i found this:

https://blog.mastykarz.nl/bundling-external-frameworks-sharepoint-framework-client-side-web-parts-ba...

 

Looks like my idea of bundling my javascripts file in the webpart is not the best approach. I know put them on my Sharepoint site (site assets) and referenced them in the "config.json" file. No more build errors so we are getting somewhere.

 

However, suppose I want to distribute my webpart to different tenants, what might be the best place to put my .js files? Azure somewhere? Or is there a better solution?

Hi @Mike Jansen,

 

You could put those scripts anywhere ( as long as they are accesible).

 

Have you looked at the Azure CDN?

 

 

@Pieter Veenstra not yet, thanks for the suggestion.

For the moment, I'm struggeling to get it working. ;)

I use a "$(document).ready" in my .js file. Looks like this is not executed...

 

Is there a reason why your not just migrating your scripts to TypeScript?

 

Something like this is easy to implement and closer to where you should want to be:

 

export default class MyFunctionsTurnedIntoAClass {

    public oldfunction1() {
      ....
    }

    public oldfunction2() {
        ....
    }

    ....
}

 

Yes ;)

This is my first test and I am not familiar with Typescript. What I try to do is get my test working and then step-by-step convert it to typescript.

@Pieter Veenstra 

Took some time but I figured it out. This is what I did:

1. No reference in the "Config.json"

2 Changed my custom script:

var CustomScript = function testFunction() {
alert("test");
};

module.exports = {
	CustomScript: CustomScript
	};

3. in my .ts file did in the render method

 

const MyCustomScript: any = require('./myscript');

MyCustomScript.CustomScript()

Now my "alert" shows up.