2

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:

SPLoaderError.loadComponentError]:
***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'.

    INNERERROR:
    ***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'.
    ***CALLSTACK:
    Error
        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
Improve this question
2
  • 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
    Commented Jun 21, 2019 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
    Commented Sep 10, 2019 at 12:53

2 Answers 2

Reset to default
3

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.`);

build.configureWebpack.mergeConfig({
    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;
    }
});

build.initialize(gulp);

and after:

gulp clean
gulp build
gulp serve
Improve this answer
1
  • Doesn't work either, for me.
    – Radityo Ardi
    Commented Jan 8, 2021 at 18:45
1

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
2
  • I fixed it by doing the above after delleting my bode modules and rerunning npm install
    – Allan MacRitchie
    Commented Oct 16, 2019 at 16:07
  • Did that, doesn't work for me.
    – Radityo Ardi
    Commented Jan 8, 2021 at 18:45

Your Answer

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

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