Sharepoint framework > reference to custom javascript

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:


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:


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

module.exports = {
	CustomScript: CustomScript

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


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


Now my "alert" shows up.