SharePoint Framework : error loading jquery in SharePoint

%3CLINGO-SUB%20id%3D%22lingo-sub-35517%22%20slang%3D%22en-US%22%3ESharePoint%20Framework%20%3A%20error%20loading%20jquery%20in%20SharePoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-35517%22%20slang%3D%22en-US%22%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20have%20created%20a%20react%2Fno%20js%20type%20of%20solution.%20When%20i%20try%20to%20import%20jquery%20into%20my%20solution%20this%20endup%20with%20issue%20loading%20the%20webpart%20(i%20cannot%20load%20the%20web%20part%2C%20and%20even%20i%20cannot%20navigate%20to%20the%20properties)%3C%2FP%3E%3CP%3Ecode%20as%20below%3A%3C%2FP%3E%3CP%3EAfter%20npm%20i%20jquery%20jqueryui%20--save%20and%20tsd%20install%20jquery%20jqueryui%20--save%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eimport%20*%20as%20jQuery%20from%20'jQuery'%3B%3CBR%20%2F%3Erequire('jqueryui')%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eat%20config%20file%3A%3C%2FP%3E%3CP%3E%22jquery%22%3A%20%7B%3CBR%20%2F%3E%22path%22%3A%20%22%3CA%20href%3D%22https%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js%3C%2FA%3E%22%2C%3CBR%20%2F%3E%22globalName%22%3A%20%22jQuery%22%3CBR%20%2F%3E%7D%2C%3CBR%20%2F%3E%22jqueryui%22%3A%20%22node_modules%2Fjqueryui%2Fjquery-ui.min.js%22%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eand%20then%20implort%20the%26nbsp%3B%3C%2FP%3E%3CP%3Eimport%20ModuleLoader%20from%20'%40microsoft%2Fsp-module-loader'%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Emodule%20load%20in%20the%20constructor%3A%3C%2FP%3E%3CP%3EModuleLoader.loadCss('%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Funitegallery%2F1.7.28%2Fcss%2Funite-gallery.css%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Funitegallery%2F1.7.28%2Fcss%2Funite-gallery.css%3C%2FA%3E')%3B%3CBR%20%2F%3EModuleLoader.loadCss('%3CA%20href%3D%22https%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Funitegallery%2F1.7.28%2Fthemes%2Fdefault%2Fug-theme-default.css%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcdnjs.cloudflare.com%2Fajax%2Flibs%2Funitegallery%2F1.7.28%2Fthemes%2Fdefault%2Fug-theme-default.css%3C%2FA%3E')%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FP%3E%3CP%3EDuring%20the%20gulp%20serve%3A%20it%20is%20always%20fails%20at%20%22Starting%20subtask%20'webpack'...%22%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWith%20the%20above%20steps%20my%20webpart%20stoped%20working%20with%20the%20below%20issue%3A%3C%2FP%3E%3CP%3E%3CSPAN%3E%5BSPWebPartErrorCode.ScriptLoadError%5D%3A%3A%20Unable%20to%20load%20web%20part%20WebPart.NewsCarouselWpWebPart.ca083c3e-f91c-4ffa-88cb-4ae465ae8e76%2CError%3A%20Error%20loading%20https%3A%2F%2Fplaceholder-base-url%2Fdf1a96d0-3809-4387-ad16-02d31aeb2570%20script%20resources%20due%20to%3A%20undefined.%20CALLSTACK%3A%3A%20Error%20at%20t%20%5Bas%20constructor%5D%20(%3CA%20href%3D%22https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-client-base_en-us_f35aa94ac66731c2577eee095f5caab4.js%3A48%3A11145%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-client-base_en-us_f35aa94ac66731c2577eee095f5caab4.js%3A48%3A11145%3C%2FA%3E)%20at%20new%20t%20(%3CA%20href%3D%22https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A21019%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A21019%3C%2FA%3E)%20at%20Function.t.create%20(%3CA%20href%3D%22https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A21432%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A21432%3C%2FA%3E)%20at%20%3CA%20href%3D%22https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A30960%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Fsp-client-prod_2016-11-21.008%2Fsp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js%3A47%3A30960%3C%2FA%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20can%20understand%20it%20is%20not%20rendering%20the%20external%2Fcdn%20jquery%20related%20css%20files.%26nbsp%3B%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%3Ecan%20some%20one%20suggest%20what%20could%20have%20caused%20this%20issue%3F%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%3CSPAN%3EI%20even%20tried%20with%20angular%2C%20it%20is%20not%20even%20loading%20the%20jquery%20dependent%20data%20for%20angular%20during%20the%20npm%20install%20angular%20--save%20command%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-35946%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Framework%20%3A%20error%20loading%20jquery%20in%20SharePoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-35946%22%20slang%3D%22en-US%22%3E%3CP%3Eit%20turns%20out%20using%20%22require%22%20would%20work%2C%20check%20%3CA%20href%3D%22http%3A%2F%2Fstackoverflow.com%2Fquestions%2F37651495%2Fdifference-between-import-from-and-import-require-in-typescript%22%20target%3D%22_self%22%20rel%3D%22nofollow%20noopener%20noreferrer%22%3Ethis%20discussion%3C%2FA%3E.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-35532%22%20slang%3D%22en-US%22%3ERe%3A%20SharePoint%20Framework%20%3A%20error%20loading%20jquery%20in%20SharePoint%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-35532%22%20slang%3D%22en-US%22%3E%3CP%3ESimilar%20issue%20for%20me%2C%20%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Fjquery-cdn%22%20target%3D%22_self%22%20rel%3D%22noopener%20noreferrer%22%3Ethis%20sample%3C%2FA%3E%26nbsp%3Bseems%20working%20fine%2C%20but%20when%20trying%20start%20new%20project%2C%20having%20issues%20with%20reference%20external%20libries.%3C%2FP%3E%3C%2FLINGO-BODY%3E
New Contributor

Hi,

 

I have created a react/no js type of solution. When i try to import jquery into my solution this endup with issue loading the webpart (i cannot load the web part, and even i cannot navigate to the properties)

code as below:

After npm i jquery jqueryui --save and tsd install jquery jqueryui --save

 

import * as jQuery from 'jQuery';
require('jqueryui');

 

at config file:

"jquery": {
"path": "https://code.jquery.com/jquery-2.1.1.min.js",
"globalName": "jQuery"
},
"jqueryui": "node_modules/jqueryui/jquery-ui.min.js",

 

and then implort the 

import ModuleLoader from '@microsoft/sp-module-loader';

 

module load in the constructor:

ModuleLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.28/css/unite-gallery.css');
ModuleLoader.loadCss('https://cdnjs.cloudflare.com/ajax/libs/unitegallery/1.7.28/themes/default/ug-theme-default.css');

During the gulp serve: it is always fails at "Starting subtask 'webpack'..."

 

With the above steps my webpart stoped working with the below issue:

[SPWebPartErrorCode.ScriptLoadError]:: Unable to load web part WebPart.NewsCarouselWpWebPart.ca083c3e-f91c-4ffa-88cb-4ae465ae8e76,Error: Error loading https://placeholder-base-url/df1a96d0-3809-4387-ad16-02d31aeb2570 script resources due to: undefined. CALLSTACK:: Error at t [as constructor] (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-client-base_en-us_f35aa94ac667...) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf7...) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf7...) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf7...

 

I can understand it is not rendering the external/cdn jquery related css files. 

 

can some one suggest what could have caused this issue?

I even tried with angular, it is not even loading the jquery dependent data for angular during the npm install angular --save command

 

 

 

2 Replies

Similar issue for me, this sample seems working fine, but when trying start new project, having issues with reference external libries.

it turns out using "require" would work, check this discussion.