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

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

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();
});
});

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