Forum Discussion
Visweswararao Putchala
Dec 14, 2016Copper Contributor
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
- Shawn XiongBrass Contributor
it turns out using "require" would work, check this discussion.
- Shawn XiongBrass Contributor
Similar issue for me, this sample seems working fine, but when trying start new project, having issues with reference external libries.