I have recently updated a number of modern spfx webparts to spfx 18.2 and this morning when I try to debug in workbench (locally and on tenant) I am getting serve errors in relation to react and react-dom

I am able to serve projects not using react successfully but when using spfx 18.2 but not react 16.8.4 - has anybody else encountered this issue.

I have restored to previous code backup, as well as restoring to previous days last git commit neither had a positive effect.

I get no errors in terminal but workbench shows the following message:

***Failed to load component "174429f3-8ff8-4143-8f12-7c398d264e9a" (FusionWebPartWebPart).
Original error: ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server.
Make sure that you are running 'gulp serve'.

    ***Failed to load URL 'https://localhost:4321/node_modules/react/dist/react.js' for resource 'react' in component '174429f3-8ff8-4143-8f12-7c398d264e9a' (FusionWebPartWebPart). The file was not found in the server.
    Make sure that you are running 'gulp serve'.
        at SPLoaderError.SPError [as constructor] (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:8390:24)
        at new SPLoaderError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:4036:28)
        at Function.ErrorBuilder.buildErrorWithVerboseLog (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3789:21)
        at Function.ErrorBuilder.buildLoadComponentError (https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:3697:21)
        at https://localhost:4321/temp/workbench-packages/@microsoft_sp-loader/dist/sp-loader-assembly_default.js:6275:47
  • When I review the temp folder and the node-modules folder for react the 'dist' folder does not exist - how can this be? – Allan MacRitchie Jun 21 '19 at 12:58
  • I'm having a similar issue with react 16.8.x. No solution yet. The issue is that loader is looking in the wrong place for react.js - in react 15 the path was react/dist/react.js, but with the release of react 16 it changed to react/umd/react.development.js (reactjs.org/blog/2017/09/26/react-v16.0.html). For some reason the SPFx loader is treating it as a react 15 build. – Jason Lee Sep 10 '19 at 12:53

I guess the best thing to start is gulp clean Then gulp build and then gulp serve.

Maybe these simple steps will help you to refresh all dependencies and get rid of outdated artifacts

| improve this answer | |
  • I fixed it by doing the above after delleting my bode modules and rerunning npm install – Allan MacRitchie Oct 16 '19 at 16:07

Insert 2 lines to your gulpfile.js

'use strict';

const path = require('path');
const gulp = require('gulp');
const build = require('@microsoft/sp-build-web');
build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);

    additionalConfiguration: (generatedConfiguration) => {
        if (!generatedConfiguration.resolve.alias) {
            generatedConfiguration.resolve.alias = {};
        generatedConfiguration.resolve.alias['@utils'] = path.resolve(__dirname, 'lib/utils');
        generatedConfiguration.resolve.alias['@src'] = path.resolve(__dirname, 'lib');

        /////  insert these 2 lines ////////////
        generatedConfiguration.externals.splice(generatedConfiguration.externals.indexOf('react'), 1);
        generatedConfiguration.externals.splice(generatedConfiguration.externals.indexOf('react-dom'), 1);

        return generatedConfiguration;


and after:

gulp clean
gulp build
gulp serve
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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