SPFx - How to load jsom dependencies in a proper way

Question

I am getting crazy trying to load scripts like Runtime.js and SP.js. In the beginning I added the dependencies in the config.json as mentioned here. As usual, the Microsoft documentation is buggy and you have to be a wizard to fix the errors.

Anyway, I ended up to load the SharePoint JSOM scripts with the SPComponentLoader. In the debug it works, once deployed without -p, I get:

SP.Runtime.js:2 Uncaught Error: SP.Runtime.js is already loaded
Uncaught RangeError: Maximum call stack size exceeded
    at Boolean (<anonymous>)
    at SupplementDefaultMethod.window.<computed> [as OriginalOnError] (init.js:1:180299)
    at ULSSendExceptionImpl (init.js:1:106758)
    at ULSOnError (init.js:1:106829)
    at SupplementDefaultMethod.window.<computed> [as OriginalOnError] (init.js:1:180335)
    at ULSSendExceptionImpl (init.js:1:106758)
    at ULSOnError (init.js:1:106829)
    at SupplementDefaultMethod.window.<computed> [as OriginalOnError] (init.js:1:180335)
    at ULSSendExceptionImpl (init.js:1:106758)
    at ULSOnError (init.js:1:106829)

If I package the solution with -p I get:

GET https://relative-path.invalid/sp-init.js net::ERR_NAME_NOT_RESOLVED
GET https://relative-path.invalid/sp-runtime.js net::ERR_NAME_NOT_RESOLVED
GET https://relative-path.invalid/sharepoint.js net::ERR_NAME_NOT_RESOLVED
GET https://relative-path.invalid/microsoft-ajax.js net::ERR_NAME_NOT_RESOLVED

How do I import these files in order to work in all three scenarios?

Answer 1

Ok, so I had a situation where I needed to use the MS Project Server client scripts (PS.js), which depend on the default SharePoint client scripts. I tried the declarative way in the config.json, which you link to with your first link, and that didn't work for me, so I also turned to using the SPComponentLoader.

And, as you mention, when I was doing the development work in workbench.aspx it worked, but once in production, it ran into errors. (I don't remember if I ran into the exact same errors you are reporting, but my guess is that I probably did, based on the solution I came up with, see the code below.)

Keep in mind - I am stuck on SP 2016 on-prem. I'm using SPFx 1.1, and doing development on the hosted workbench.aspx. So the following code works for that setup, you may need to adjust for your own setup/working environment.

In any case, this is in my main webpart component (i.e. the main file that gets scaffolded into the /components/ folder):

private componentDidMount = (): void => {
    if (window.location.pathname.indexOf('/_layouts/15/workbench.aspx') > -1) {
        // if we are doing development work in the workbench,
        // we need to load all of the default sharepoint client scripts
        SPComponentLoader.loadScript('/_layouts/15/init.js', {
            globalExportsName: '$_global_init'
        })
        .then((): Promise<{}> => {
            return SPComponentLoader.loadScript('/_layouts/15/MicrosoftAjax.js', {
                globalExportsName: 'Sys'
            });
        })
        .then((): Promise<{}> => {
            return SPComponentLoader.loadScript('/_layouts/15/SP.Runtime.js', {
                globalExportsName: 'SP'
            });
        })
        .then((): Promise<{}> => {
            return SPComponentLoader.loadScript('/_layouts/15/SP.js', {
                globalExportsName: 'SP'
            });
        })
        .then((): Promise<{}> => {
            return SPComponentLoader.loadScript('/_layouts/15/PS.js', {
                globalExportsName: 'PS'
            });
        })
        .then((): void => {
            this.loadMyData();
        });
    } else {
        // if we are NOT doing development work in the workbench,
        // we only need to load the Project Server client scripts,
        // as all the default sharepoint client scripts will already be loaded
        SPComponentLoader.loadScript('/_layouts/15/PS.js', {
            globalExportsName: 'PS'
        })
        .then((): void => {
            this.loadMyData();
        });
    }
}

Again, I totally abandoned the config.js and just went with this alone.