Failed to load component dependency "react" with failover path "node_modules/react/dist/react.js" in workbench

Question

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

Answer 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
    }
  }

2. 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;
  }
});