SharePointFramework: unable to load main WebPart component when it contains code to load jQuery

%3CLINGO-SUB%20id%3D%22lingo-sub-187386%22%20slang%3D%22en-US%22%3ESharePointFramework%3A%20unable%20to%20load%20main%20WebPart%20component%20when%20it%20contains%20code%20to%20load%20jQuery%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-187386%22%20slang%3D%22en-US%22%3E%3CP%3Ethe%20render%20method%20In%20my%20main%20WebPart%20ts%20file%20looks%20like%20this%3A%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CPRE%3E%20%20public%20render()%3A%20void%20%7B%0A%20%20%20%20if%20(this.renderedOnce%20%3D%3D%3D%20false)%20%7B%0A%20%20%20%20%20%20ModuleLoader.loadScript('https%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js'%2C%20'jQuery').then((%24%3A%20any)%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20this.jQuery%20%3D%20%24%3B%0A%20%20%20%20%20%20%20%20ModuleLoader.loadScript('https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js'%2C%20'jQuery').then(()%3A%20void%20%3D%26gt%3B%20%7B%0A%20%20%20%20%20%20%20%20%20%20this.renderContents()%3B%0A%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%7D%0A%20%20%20%20else%20%7B%0A%20%20%20%20%20%20this.renderContents()%3B%0A%20%20%20%20%7D%0A%20%20%7D%3C%2FPRE%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3EIt%20results%20to%20the%20error%20below%20when%20I%20want%20to%20test%20the%20webpart%20in%20my%20local%20environment.%20The%20error%20does%20not%20occur%20when%20I%20comment%20out%20the%20ModuleLoder.loadScript%20lines.%20What%20can%20be%20wrong%3F%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CPRE%3E%5BError%5D%20%5B1524745102027%5D%5BSPComponentLoader.loadComponen%5D%20Error%3A%20***Attempted%20to%20load%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart)%203%20times%20without%20success.%0A%20_writeToConsole%20(sp-loader-assembly_en-us.js%3A10834)%0A%20_log%20(sp-loader-assembly_en-us.js%3A10817)%0A%20logError%20(sp-loader-assembly_en-us.js%3A10766)%0A%20(anonyme%20Funktion)%20(sp-loader-assembly_en-us.js%3A7913)%0A%20promiseReactionJob%0A%5BLog%5D%20%5B1524745102030%5D%5BComponentStore%5D%20***Deleting%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20version%20%220.0.1%22%20from%20the%20store.%20(sp-loader-assembly_en-us.js%2C%20line%2010837)%0A%5BError%5D%20%5B1524745102031%5D%5BApplication.8be81a5c-af38-4bb2.ClientSideWebPartManager%5D%20%5BSPLoaderError.loadComponentError%5D%3A%0A***Failed%20to%20load%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart).%0AOriginal%20error%3A%20***Failed%20to%20load%20entry%20point%20from%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart).%0AOriginal%20error%3A%20Error%20loading%20https%3A%2F%2Fcomponent-id.invalid%2F5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1%0A%20Cannot%20find%20module%20%22set-webpack-public-path!%22%0A%0A***INNERERROR%3A%0A***Failed%20to%20load%20entry%20point%20from%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart).%0AOriginal%20error%3A%20Error%20loading%20https%3A%2F%2Fcomponent-id.invalid%2F5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1%0A%20Cannot%20find%20module%20%22set-webpack-public-path!%22%0A***CALLSTACK%3A%0ASPError%40https%3A%2F%2Flocalhost%3A4321%2Fnode_modules%2F%40microsoft%2Fsp-loader%2Fdist%2Fsp-loader-assembly_en-us.js%3A10183%3A33%0ASPLoaderError%40https%3A%2F%2Flocalhost%3A4321%2Fnode_modules%2F%40microsoft%2Fsp-loader%2Fdist%2Fsp-loader-assembly_en-us.js%3A4211%3A32%0ASPLoaderError%40%5Bnative%20code%5D%0AbuildErrorWithVerboseLog%40https%3A%2F%2Flocalhost%3A4321%2Fnode_modules%2F%40microsoft%2Fsp-loader%2Fdist%2Fsp-loader-assembly_en-us.js%3A3821%3A146%0Ahttps%3A%2F%2Flocalhost%3A4321%2Fnode_modules%2F%40microsoft%2Fsp-loader%2Fdist%2Fsp-loader-assembly_en-us.js%3A7952%3A61%0ApromiseReactionJob%40%5Bnative%20code%5D%0A%20_writeToConsole%20(sp-loader-assembly_en-us.js%3A10834)%0A%20_log%20(sp-loader-assembly_en-us.js%3A10817)%0A%20logErrorData%20(sp-loader-assembly_en-us.js%3A10771)%0A%20(anonyme%20Funktion)%20(sp-webpart-base_en-us.js%3A2208)%0A%20executeWithoutFailing%20(sp-webpart-base_en-us.js%3A3764)%0A%20renderError%20(sp-webpart-base_en-us.js%3A2206)%0A%20_handleModulePromiseRejection%20(sp-webpart-base_en-us.js%3A2531)%0A%20(anonyme%20Funktion)%0A%20(anonyme%20Funktion)%20(sp-webpart-base_en-us.js%3A2041)%0A%20promiseReactionJob%0A%5BError%5D%20Unhandled%20Promise%20Rejection%3A%20Error%3A%20***Failed%20to%20load%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart).%0AOriginal%20error%3A%20***Failed%20to%20load%20entry%20point%20from%20component%20%225569336a-a5d1-423d-97c3-e643a657c71e%22%20(IhkgSitzungsverwaltungWebPart).%0AOriginal%20error%3A%20Error%20loading%20https%3A%2F%2Fcomponent-id.invalid%2F5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1%0A%20Cannot%20find%20module%20%22set-webpack-public-path!%22%0A%20(anonyme%20Funktion)%20(sp-loader-assembly_en-us.js%3A10176)%0A%20promiseReactionJob%0A%5BError%5D%20Unhandled%20Promise%20Rejection%3A%20Error%3A%20***The%20value%20for%20%22error%22%20must%20not%20be%20undefined%0A%20isNotNullOrUndefined%20(sp-loader-assembly_en-us.js%3A8934%3A128)%0A%20logError%20(sp-loader-assembly_en-us.js%3A10765)%0A%20(anonyme%20Funktion)%20(sp-webpart-workbench_en-us.js%3A34024)%0A%20promiseReactionJob%3C%2FPRE%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-187725%22%20slang%3D%22en-US%22%3ERe%3A%20SharePointFramework%3A%20unable%20to%20load%20main%20WebPart%20component%20when%20it%20contains%20code%20to%20load%20jQuery%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-187725%22%20slang%3D%22en-US%22%3E%3CP%3EThank%20you!%20I%20did%20not%20test%20your%20solution%20though.%20I%20meanwhile%20added%20jquery%20via%20npm%20and%20that%20works%20so%20far.%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-187711%22%20slang%3D%22en-US%22%3ERe%3A%20SharePointFramework%3A%20unable%20to%20load%20main%20WebPart%20component%20when%20it%20contains%20code%20to%20load%20jQuery%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-187711%22%20slang%3D%22en-US%22%3E%3CP%3EYou%20are%20using%20ModuleLoader%20which%20has%20been%20long%20deprecated.%3CBR%20%2F%3EInstead%20of%20that%20you%20should%20be%20using%26nbsp%3B%3CSTRONG%3ESPComponentLoader%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAdd%20the%20below%20import%20statement%3A%3CBR%20%2F%3E%3CBR%20%2F%3E%3CEM%3Eimport%20%7B%20SPComponentLoader%20%7D%20from%20'%40microsoft%2Fsp-loader'%3B%3CBR%20%2F%3E%3CBR%20%2F%3E%3C%2FEM%3EAnd%20modify%20your%20code%20to%3A%3C%2FP%3E%3CBLOCKQUOTE%3E%3CDIV%3E%3CBR%20%2F%3E%3CBR%20%2F%3ESPComponentLoader.loadScript('%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%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcode.jquery.com%2Fjquery-2.1.1.min.js%3C%2FA%3E'%2C%20%7B%20globalExportsName%3A%20'jQuery'%20%7D).then((%24%3A%20any)%3A%20void%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ethis.jQuery%20%3D%20%24%3B%3CBR%20%2F%3ESPComponentLoader.loadScript('%3CA%20href%3D%22https%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%22%20target%3D%22_blank%22%20rel%3D%22nofollow%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fcode.jquery.com%2Fui%2F1.12.1%2Fjquery-ui.min.js%3C%2FA%3E'%2C%20%7B%20globalExportsName%3A%20'jQuery'%20%7D).then(()%3A%20void%20%3D%26gt%3B%20%7B%3CBR%20%2F%3Ethis.renderContents()%3B%3CBR%20%2F%3E%7D)%3B%3CBR%20%2F%3E%7D)%3B%3C%2FDIV%3E%3C%2FBLOCKQUOTE%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

the render method In my main WebPart ts file looks like this:

 

  public render(): void {
    if (this.renderedOnce === false) {
      ModuleLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', 'jQuery').then(($: any): void => {
        this.jQuery = $;
        ModuleLoader.loadScript('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', 'jQuery').then((): void => {
          this.renderContents();
        });
      });
    }
    else {
      this.renderContents();
    }
  }
 
It results to the error below when I want to test the webpart in my local environment. The error does not occur when I comment out the ModuleLoder.loadScript lines. What can be wrong?
 
[Error] [1524745102027][SPComponentLoader.loadComponen] Error: ***Attempted to load component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart) 3 times without success.
	_writeToConsole (sp-loader-assembly_en-us.js:10834)
	_log (sp-loader-assembly_en-us.js:10817)
	logError (sp-loader-assembly_en-us.js:10766)
	(anonyme Funktion) (sp-loader-assembly_en-us.js:7913)
	promiseReactionJob
[Log] [1524745102030][ComponentStore] ***Deleting component "5569336a-a5d1-423d-97c3-e643a657c71e" version "0.0.1" from the store. (sp-loader-assembly_en-us.js, line 10837)
[Error] [1524745102031][Application.8be81a5c-af38-4bb2.ClientSideWebPartManager] [SPLoaderError.loadComponentError]:
***Failed to load component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart).
Original error: ***Failed to load entry point from component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart).
Original error: Error loading https://component-id.invalid/5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1
	Cannot find module "set-webpack-public-path!"

***INNERERROR:
***Failed to load entry point from component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart).
Original error: Error loading https://component-id.invalid/5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1
	Cannot find module "set-webpack-public-path!"
***CALLSTACK:
SPError@https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:10183:33
SPLoaderError@https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:4211:32
SPLoaderError@[native code]
buildErrorWithVerboseLog@https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:3821:146
https://localhost:4321/node_modules/@microsoft/sp-loader/dist/sp-loader-assembly_en-us.js:7952:61
promiseReactionJob@[native code]
	_writeToConsole (sp-loader-assembly_en-us.js:10834)
	_log (sp-loader-assembly_en-us.js:10817)
	logErrorData (sp-loader-assembly_en-us.js:10771)
	(anonyme Funktion) (sp-webpart-base_en-us.js:2208)
	executeWithoutFailing (sp-webpart-base_en-us.js:3764)
	renderError (sp-webpart-base_en-us.js:2206)
	_handleModulePromiseRejection (sp-webpart-base_en-us.js:2531)
	(anonyme Funktion)
	(anonyme Funktion) (sp-webpart-base_en-us.js:2041)
	promiseReactionJob
[Error] Unhandled Promise Rejection: Error: ***Failed to load component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart).
Original error: ***Failed to load entry point from component "5569336a-a5d1-423d-97c3-e643a657c71e" (IhkgSitzungsverwaltungWebPart).
Original error: Error loading https://component-id.invalid/5569336a-a5d1-423d-97c3-e643a657c71e_0.0.1
	Cannot find module "set-webpack-public-path!"
	(anonyme Funktion) (sp-loader-assembly_en-us.js:10176)
	promiseReactionJob
[Error] Unhandled Promise Rejection: Error: ***The value for "error" must not be undefined
	isNotNullOrUndefined (sp-loader-assembly_en-us.js:8934:128)
	logError (sp-loader-assembly_en-us.js:10765)
	(anonyme Funktion) (sp-webpart-workbench_en-us.js:34024)
	promiseReactionJob
2 Replies
Highlighted

You are using ModuleLoader which has been long deprecated.
Instead of that you should be using SPComponentLoader

 

Add the below import statement:

import { SPComponentLoader } from '@microsoft/sp-loader';

And modify your code to:



SPComponentLoader.loadScript('https://code.jquery.com/jquery-2.1.1.min.js', { globalExportsName: 'jQuery' }).then(($: any): void => {
this.jQuery = $;
SPComponentLoader.loadScript('https://code.jquery.com/ui/1.12.1/jquery-ui.min.js', { globalExportsName: 'jQuery' }).then((): void => {
this.renderContents();
});
});
Highlighted

Thank you! I did not test your solution though. I meanwhile added jquery via npm and that works so far.