Forum Discussion

Stephan E.'s avatar
Stephan E.
Copper Contributor
Apr 26, 2018

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

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
  • Gautam Sheth's avatar
    Gautam Sheth
    Brass Contributor
    Apr 27, 2018

    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();
    });
    });
    • Stephan E.'s avatar
      Stephan E.
      Copper Contributor
      Apr 27, 2018

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

       

       

Resources