Sp-dev-docs: Error when loading external scripts dynamically with SPComponentLoader (RC0)

Created on 22 Jan 2017 · 6Comments · Source: SharePoint/sp-dev-docs

Observed Behavior

With the SPFx RC0 and the SPComponentLoader class from the sp-loader module, I failed to load some specific scripts (some scripts are working and some others not). The same scripts was correctly loaded with the Drop 6.

For example with this code:

import { SPComponentLoader } from '@microsoft/sp-loader';
..
var ckEditorCdn: string = '//cdn.ckeditor.com/4.5.11/full/ckeditor.js';
SPComponentLoader.loadScript(ckEditorCdn, 'CKEDITOR').then((CKEDITOR: any): void => {
...
});

The script fails to load with the following error:

VM4757:4 - Uncaught (in promise) Error: 
    Error loading https://cdn.ckeditor.com/4.5.11/full/ckeditor.js

script-error

Source

OlivierCC

Most helpful comment

Thanks @vbartari, but the problem is that the import/require method in RC0 has also bugs with loading from CDN (https://github.com/SharePoint/sp-dev-docs/issues/336). I can also include external scripts directly in the buddle but I preffer really to use external CDN.

OlivierCC on 23 Jan 2017

👍2

All 6 comments

@OlivierCC : Add your script inside external section in package. json file
and call it in to your webpart file using import/require(' ').
It will work.

VidhiBartariya on 22 Jan 2017

OlivierCC on 23 Jan 2017

👍2

In RC0 the signature of the loadScript method has changed. So instead of using SPComponentLoader.loadScript(ckEditorCdn, 'CKEDITOR') you should use SPComponentLoader.loadScript(ckEditorCdn, { globalExportsName: 'CKEDITOR' }).

waldekmastykarz on 23 Jan 2017

👍1

Here are some notes on require/SPCOmponentLoader from @nickpape-msft

There are a couple differences between the 2 methods:

Require
• This method should work:
o Regardless of where your script is located: A CDN, your node_modules, or your src/ folder.
o Regardless of whether your script is an AMD module or not (use globalName)
o Regardless of whether you want the script bundled or not.

• You automatically get better TypeScript support around typings

• This means the resource is loaded when loading the bundle. [Due to webpack: the resource is listed at the top of the bundle in the define() statement].. You might not want this in every case (such as if you want to load something only in edit mode).

• The resource, if it is not pointed at a qualified URL in the config.json, will be pulled into the build system (e.g. it will be in the dist/ folder after a successful build). If it is bundled, the code will be in the bundle. If it is not bundled, there will be a separate file in the dist folder. Essentially, using require allows the build system to know about the resource.

SPComponentLoader
• You don’t want the script loaded when the WebPart is loaded (perhaps you want to wait until the webpart is in edit mode).

• The path to the resource may change (imagine that you might want to load one of 3 scripts, and that changes based on user input).

• You are having issues with require for one reason or another.

patmill on 23 Jan 2017

@waldekmastykarz thanks a lot that's working now with the good signature of the loadscript method !!
@patmill thanks a lot for this complete explanation, very very usefull.

I'm closing the bug. Thanks a lot for your help.

OlivierCC on 23 Jan 2017

Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues