My webparts are not loading in SharePoint when I use fast-serve

[canturan]

I was testing the fast-serve on my solution. I followed the instructions, added fast-serve to my solution. I can execute the "npm run serve" without any problem. The solution is compiled. But when I open SharePoint page which has my web parts, the code is not loaded:

My solution has multiple entry points and multiple extentions, web parts in multiple bundles. All are compiling without an error.

I also have a library component in the solution which is linked with npm link.

The errors I am seeing on the console:

VM2654:34 A preload for 'https://localhost:4321/dist/mybundle.js' is found, but is not used because the request credentials mode does not match. Consider taking a look at crossorigin attribute.

Could not load mybundle in require.

What can be the issue?

BTW: gulp serve is working without any issues.

[canturan]

After some testing, I think, I have found the problem.

When I have multiple components (web parts or extensions) in one bundle, they are not loading. When the bundle has just one component, then everything works as expected.

But the question is still open, why?

Thank you for the help.

[s-KaiNet]

Which version of SPFx do you use? Do you apply any webpack modifications in your gulpfile.js? Are there any other errors in console? Because the one you mentioned looks very generic, usually there are some others. Looks like one of your components causes the issue, but it's difficult to say why. Personally, I also have multiple web parts and extensions in my solution, everything is bundled into one file without any issues.

[canturan]

SPFx Version 1.17.3 I have just an alias config in gulpfile.js and in webpack. Same as the advance example. Nothing more. When I put every component to a separate bundle everything works fine. If I put webparts and extensions in one bundle then they are not loading with error that I posted yesterday (Could not load in require). Without any details.. The error comes from the sp-pages-assembly.

It is BTW not important which web part or extension I combine in a bundle. If I put two web parts in a component, then they are not loading.

That all I see in console

[s-KaiNet]

Could you show your webpack.extend.js, gulpfile.js, tsconfig.json?

[canturan]

Sure:

webpack.extend.js

const path = require('path');

// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const webpackConfig = {
  resolve: {
    alias: {
      "@src": path.resolve(__dirname, "..", "src")
    }
  }
}

// for even more fine-grained control, you can apply custom webpack settings using below function
const transformConfig = function (initialWebpackConfig) {
  // transform the initial webpack config here, i.e.
  // initialWebpackConfig.plugins.push(new webpack.Plugin()); etc.

  return initialWebpackConfig;
}

module.exports = {
  webpackConfig,
  transformConfig
}

tsconfig.json

{
  "extends": "./node_modules/@microsoft/rush-stack-compiler-4.5/includes/tsconfig-web.json",
  "compilerOptions": {
    "target": "es6",
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "jsx": "react",
    "declaration": true,
    "sourceMap": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "outDir": "lib",
    "inlineSources": false,
    "strictNullChecks": false,
    "noUnusedLocals": false,
    "baseUrl": ".",
    "paths": {
      "@src/*": [
        "src/*"
      ]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./node_modules/@microsoft"
    ],
    "types": [
      "es6-promise",
      "webpack-env"
    ],
    "lib": [
      "es6",
      "es5",
      "dom",
      "es2015.collection",
      "es2015.promise"
    ]
  },
  "include": [
    "src/appSettings.d.ts",
    "src/*.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "node_modules",
    "lib"
  ]
}

gulpfile.js

'use strict';

process.env.NODE_OPTIONS="--max_old_space_size=8192";

const build = require('@microsoft/sp-build-web');
const logging = require('@microsoft/gulp-core-build');

//const gulpSequence = require('gulp-sequence');
const fs = require('fs');
const gulp = require('gulp');

build.addSuppression(`Warning - [sass] The local CSS class 'ms-Grid' is not camelCase and will not be type-safe.`);
build.addSuppression(`Warning - [sass] The local CSS class 'slick-loading' is not camelCase and will not be type-safe.`);
build.addSuppression(`Warning - [sass] The local CSS class 'slick-initialized' is not camelCase and will not be type-safe.`);
build.addSuppression(`Warning - [sass] The local CSS class 'slick-vertical' is not camelCase and will not be type-safe.`);
build.addSuppression(`Warning - [sass] src\\common\\ouifr\\sass\\Fabric.Scoped.scss: filename should end with module.sass or module.scss`);
build.addSuppression(`Warning - [sass] src\\common\\ouifr\\sass\\Fabric.scss: filename should end with module.sass or module.scss`);
build.addSuppression(`Warning - [sass] src\\common\\ouifr\\sass\\ThemingSass.scss: filename should end with module.sass or module.scss`);
build.addSuppression(/[\w]+ApplicationCustomizer\: Admins can make this solution available to all sites in the organization/);
build.addSuppression(/(.)* The icon path \Wdata:image\/png\Wbase64,(.)*/);
// this suppressions are for the react-dnd module which is used for drag and drop inside tiles webpart
build.addSuppression(/Warning - \[webpack\] 'dist'\:(.)*/);

  //needed to add images to this bundle
  /*
  build.configureWebpack.mergeConfig({
      additionalConfiguration: (generatedConfiguration) => {
          if (build.getConfig().production) {
              var basePath = build.writeManifests.taskConfig.cdnBasePath;
              if (!basePath.endsWith('/')) {
                  basePath += '/';
              }
              generatedConfiguration.output.publicPath = basePath;
          }
          else {
              generatedConfiguration.output.publicPath = "/dist/";
          }
          return generatedConfiguration;
      }
  });
  */

const path = require('path');
build.configureWebpack.mergeConfig({
  additionalConfiguration: (generatedConfiguration) => {
    if(!generatedConfiguration.resolve.alias){
      generatedConfiguration.resolve.alias = {};
    }

    //root src folder
    generatedConfiguration.resolve.alias['@src'] = path.resolve( __dirname, 'lib')

    return generatedConfiguration;
  }
});

var getTasks = build.rig.getTasks;
build.rig.getTasks = function () {
  var result = getTasks.call(build.rig);
  result.set('serve', result.get('serve-deprecated'));
  return result;
};
build.rig.getTasks

/* fast-serve */
const { addFastServe } = require("spfx-fast-serve-helpers");
addFastServe(build);
/* end of fast-serve */

build.initialize(require('gulp'));

[s-KaiNet]

The configs look good to me. You said, that it doesn't work for you, as soon as you add at least two web parts in one bundle. Could you do the following experiment? Add two web parts in one bundle and check that the error is reproduced. Then remove all the code from render methods from both web parts and add only this.domElement.innerHTML = '<div>testing</div>';. Also remove all unused references from webparts' code file. Then run npm run serve and see if the issue is still available. That way, we're trying to understand if the issue is related to your webpart's implementation, or rather it's a configuration problem. If everything works when you have render methods simple, then restore render method in one of the webparts and run npm run serve again to check, if there is an issue. If issue appears, then it's something wrong with the code and maybe imports, but that's another story.

Also, you said you have a library component linked with npm link. How have you setup this library component, using the tutorial from MSFT here?

[github-actions[bot]]

This issue has been automatically closed because we haven't received any response back. Please feel free to reopen if needed.

[s-KaiNet]

@canturan JFYI as per discovered at #115, I found a way to repro this issue and the fix was also applied to SPFx 1.17 version, so please try it by installing npm i spfx-fast-serve-helpers@1.17.5 -DE

[canturan]

@s-KaiNet : Thank you very much for the fix. Sorry, I couldn't find time to test it as you describe and just found a workaround of using a flat structure of web parts in the dev config which did worked for me. It was way too much work for me to test, because I have like 20+ web parts in my solution :)

It is great, that we had a fix now!!

[s-KaiNet]

Closing, as it was auto-opened by a bot.