Sharepoint framework > reference to custom javascript

[Mike Jansen]

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

[#2]

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?

[#3]

Hi @Mike Jansen,

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

Have you looked at the Azure CDN?

[#4]

@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...

[#5]

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() {
        ....
    }

    ....
}

[#6]

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.

[#7]

@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.