0

I am building a SPFX webpart based on SP2016 onward, including SP2019 and online (@microsoft/[email protected]).

There is no error in Visual Studio code. When I run "gulp serve", the workbench prompt up without error. Then I added my workpart, the webpart shows up a batch of error message and keep looping itself.

In F12 tool the first 2 lines are:

GET https://localhost:4321/node_modules/@microsoft/sp-property-pane/node_modules/react/dist/react.js net::ERR_ABORTED 404 (Not Found)

GET https://localhost:4321/node_modules/@microsoft/sp-property-pane/node_modules/react-dom/dist/react-dom.js net::ERR_ABORTED 404 (Not Found)

I verified and those 2 files really not exist. I have tried "npm install", "npm update", "npm install @microsoft/sp-property-pane", removed entire node_module folder and npm install. All approaches cannot fix it. The error always the same. What should I do?

Here are the batch of error message in the webpart:

[SPLoaderError.loadComponentError]: ***Failed to load component "9178264c-1593-4315-81fd-cf68f8261097" (SpapitestWebPart). Original error: ***Failed to load component dependency "react" with failover path "node_modules/react/dist/react.js" from component "9178264c-1593-4315-81fd-cf68f8261097" (SpapitestWebPart). Original error: Script error for: react http://requirejs.org/docs/errors.html#scripterror

***INNERERROR: ***Failed to load component dependency "react" with failover path "node_modules/react/dist/react.js" from component "9178264c-1593-4315-81fd-cf68f8261097" (SpapitestWebPart). Original error: Script error for: react http://requirejs.org/docs/errors.html#scripterror ***CALLSTACK: Error at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:24443:24) at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:42161:28) at Function../sp-loader.js.WEBPACK_AMD_DEFINE_RESULT.ff4n.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46155:21) at Function../sp-loader.js.WEBPACK_AMD_DEFINE_RESULT.ff4n.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:46024:21) at https://localhost:4321/temp/workbench-packages/@microsoft_sp-webpart-workbench/local-workbench/sp-webpart-workbench-assembly_default.js:45362:75

1 Answer 1

1

It's been happening to me as well. As a workaround, I've modified the spfx bundling process to tell it explicitly where to look for react and react-dom by defining them like other externals (after removing them from preexisting externals list). I haven't tested this solution in workbench though (only on live site debugging, since I'm working on listview commandset), and off the top of my head neither react nor react-dom are exposed via global variables in workbench, so for workbench purpose you may want to omit step 1 from my instructions and bundle react and react-dom into your package. Bear in mind though, that bundling react and react-dom into production package is not recommended unless you have a very particular requirement.

  1. To tell the solution where to look for the libaries, in config/config.js, add following to externals:
"externals": {
    "react": {
      "path": "//", //path property is apparently required, that's why I'm just leaving anything here
      "globalName": "React" //react is exposed via "React" global variable in modern SharePoint environment
    },
    "react-dom": {
      "path": "//", //path property is apparently required, that's why I'm just leaving anything here
      "globalName": "ReactDOM" //react-dom is exposed via "ReactDOM" global variable in modern SharePoint environment
    }
  }
  1. To remove the preexisting "external" configuration of react and react-dom, in your gulpfile.js add:
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    generatedConfiguration.externals = generatedConfiguration.externals.filter(e => !["react","react-dom"].includes(e))

    return generatedConfiguration;
  }
});
1
  • looks like that wasn't my issue :( "Error - [copy-assets] External "react" is specified both as a linked package in the node_modules dependency tree and as an external in in the config.json file. Remove one of the external references. Only one external refles dependency tree and as an external in in the config.json file. Remove one of the external references. Only one external reference type is allowed per external package. "
    – sigmapi13
    Apr 2, 2021 at 15:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.