Sp-dev-docs: Load JQuery from CDN

[mrik23]

The JQuery components are still included in the solution package even if not directly included. How could we just reference the JQuery files from the CDN same as the CSS? Is it possible to just use SPComponentLoader.loadScript in the constructor and maybe not load JQuery with NPM?

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 9f5a35c2-9914-fc67-1550-15d4f63c918c
• Version Independent ID: 8418c398-1a93-622d-4df8-84c866fef67f
• Content: Add jQueryUI Accordion to your SharePoint client-side web part
• Content Source: docs/spfx/web-parts/get-started/add-jqueryui-accordion-to-web-part.md
• Service: unspecified
• GitHub Login: @spdevdocs
• Microsoft Alias: spdevdocs

[waldekmastykarz]

In the tutorial, you specify node_modules/jquery/dist/jquery.min.js as the path to jQuery. If you replace this path with a URL, jQuery will be loaded from that URL on runtime and will not be included in the generated package.

[mrik23]

Thanks, that's working fine. And I see now that it is explained later in the documentation https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/basics/add-an-external-library#load-a-script-from-a-cdn so maybe it's not necessary to explain more about it in this part or maybe just mention it and link to the external libraries part.

[Amysno]

In the tutorial you use the npm shrinkwrap command... why ? it does nothing but throw the following error on the webpart :

Original error: *Failed to load path dependency "jqueryui" from component "0f6fb1a5-754d-4595-8e80-5d09d2580ab9" (JqueryWebPart).
Original error: Error loading https://relative-path.invalid/jquery as "jquery" from https://component-id.invalid/0f6fb1a5-754d-4595-8e80-5d09d2580ab9_0.0.1/jqueryui
Unable to load script https://relative-path.invalid/jquery

[waldekmastykarz]

When working with npm older than v5, it was necessary to use shrinkwrap, to lock the versions of packages you were using in your solution. Without it, each time you would restore dependencies, you could get a different version of the packages, which could lead to breaking your solution without any changes to your code.

The above error is a runtime error coming from SPFx. Why do you think it's related to npm shrinkwrap?

[djbprogrammer]

I followed your instructions but got this after running 'gulp serve':
[SPLoaderError.loadComponentError]:

*Failed to load component "146c76b8-2650-4854-bd51-05b2576c3f7e" (JQueryWebPart).

Original error: *Failed to load URL 'https://localhost:4321/node_modules/jqueryui/jquery-ui.min.js' for resource 'jqueryui' in component '146c76b8-2650-4854-bd51-05b2576c3f7e' (JQueryWebPart). The file was not found in the server.

Make sure that you are running 'gulp serve'.

*INNERERROR:

*Failed to load URL 'https://localhost:4321/node_modules/jqueryui/jquery-ui.min.js' for resource 'jqueryui' in component '146c76b8-2650-4854-bd51-05b2576c3f7e' (JQueryWebPart). The file was not found in the server.

Make sure that you are running 'gulp serve'.

*CALLSTACK:

Error
at SPError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10183:9)
at SPLoaderError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:4211:9)
at ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3821:9)
at ErrorBuilder.buildLoadComponentError (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3743:9)
at Anonymous function (https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:7952:9)

Any thoughts? By the way, I do appreciate all your hard work in putting these instructions online.

[djbprogrammer]

I should mention that this is my first attempt with all of the new SharePoint Framework tools. I am totally disoriented but hope that the light bulb will come on soon.

[djbprogrammer]

I re-ran npm install --save @types/jqueryui twice...Then it started working.

[a2life]

When you point external to cdn, here is the set up I got it working
"externals": {
"jquery": {
"path": "https://code.jquery.com/jquery-3.3.1.min.js",
"globalName": "jquery"
},
"jqueryui": {
"path": "https://code.jquery.com/ui/1.12.1/jquery-ui.js",
"globalName": "jquery",
"globalDependencies": [
"jquery"
]
}
},

jqueryui is not a module so it needed extra definitions. jquery is a module, but for jqueryui to be able to find jquery, it needed to be declared as if it was non-module. "global dependency' parameter is to ensure that the jquery needed to be loaded first before jqueryui does.

[VesaJuvonen]

Question answered, so closing this one here. Thanks, everyone for your input.

[msft-github-bot]

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