Forum Discussion

Visweswararao Putchala's avatar
Visweswararao Putchala
Copper Contributor
Dec 14, 2016

SharePoint Framework : error loading jquery in SharePoint

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_f35aa94ac66731c2577eee095f5caab4.js:48:11145) at new t (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js:47:21019) at Function.t.create (https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js:47:21432) at https://spoprod-a.akamaihd.net/files/sp-client-prod_2016-11-21.008/sp-webpart-base_en-us_7d0afa6ccf73b6579e56d7cc6f3990b8.js:47:30960

 

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

 

 

 

Resources