Webparts failing to load when serving using multi-component bundles

[akarlsten]

Perhaps related to #111.

We've recently tried moving our individually bundled webparts/components into a multi-component bundle, as described here.

Going from something like:

"bundles": {
    "workspace-buttons-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/workspaceButtons/WorkspaceButtonsWebPart.js",
          "manifest": "./src/webparts/workspaceButtons/WorkspaceButtonsWebPart.manifest.json"
        }
      ]
    },
    "workspace-document-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/workspaceDocument/WorkspaceDocumentWebPart.js",
          "manifest": "./src/webparts/workspaceDocument/WorkspaceDocumentWebPart.manifest.json"
        }
      ]
    },
    "workspace-comments-web-part": {
      "components": [
        {
          "entrypoint": "./lib/webparts/workspaceComments/WorkspaceCommentsWebPart.js",
          "manifest": "./src/webparts/workspaceComments/WorkspaceCommentsWebPart.manifest.json"
        }
      ]
    }
...

To:

  "bundles": {
    "workspace": {
      "components": [
        {
          "entrypoint": "./lib/webparts/workspaceButtons/WorkspaceButtonsWebPart.js",
          "manifest": "./src/webparts/workspaceButtons/WorkspaceButtonsWebPart.manifest.json"
        },
        {
          "entrypoint": "./lib/webparts/workspaceDocument/WorkspaceDocumentWebPart.js",
          "manifest": "./src/webparts/workspaceDocument/WorkspaceDocumentWebPart.manifest.json"
        },
        {
          "entrypoint": "./lib/webparts/workspaceComments/WorkspaceCommentsWebPart.js",
          "manifest": "./src/webparts/workspaceComments/WorkspaceCommentsWebPart.manifest.json"
        }
      ]
    },
   ...

Now, the components wont load with the same [Object object] error as in the linked issue, and in the console we see errors like the following:

This only happens when serving the project, deploying it as an .sppkg works as expected!

We're using pretty standard fast-serve settings:

config.json

{
  "$schema": "https://raw.githubusercontent.com/s-KaiNet/spfx-fast-serve/master/schema/config.latest.schema.json",
  "cli": {
    "isLibraryComponent": false
  },
  "serve": {
    "open": false,
    "fullScreenErrors": true,
    "loggingLevel": "minimal",
    "hotRefresh": false,
    "eslint": false
  }
}

webpack.extend.js

/*
 * User webpack settings file. You can add your own settings here.
 * Changes from this file will be merged into the base webpack configuration file.
 * This file will not be overwritten by the subsequent spfx-fast-serve calls.
 */

// you can add your project related webpack configuration here, it will be merged using webpack-merge module
// i.e. plugins: [new webpack.Plugin()]
const path = require('path')
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.
  for (const plugin of initialWebpackConfig.plugins) {
    if (plugin.constructor.name === 'ForkTsCheckerWebpackPlugin') {
      plugin.options.eslint = false
    }
  }

  return initialWebpackConfig
}

module.exports = {
  webpackConfig,
  transformConfig,
}

This is with SPFx 1.18, fast-serve 3.0.7 and fast-serve-helpers 1.18.1

Edit: to mention that there are some externals (officeJs) part of the project as well, dunno if that could affect things.

[s-KaiNet]

Finally, I was able to reproduce the issue. It fails for SPFx 1.18, but works for SPFx 1.17 (I don't know why in the previous issue the error was for 1.17 as well). Will take a look what could be done here.

[s-KaiNet]

Well, actually it's even more weird. If you add to a page the very first component from your "bundle" list, everything works just fine (in your sample, it's WorkspaceButtonsWebPart). If you add any other component - it fails.

[s-KaiNet]

Could you install npm i spfx-fast-serve-helpers@1.18.2-beta.1 -DE and see if this beta version fixes your issue?

[akarlsten]

We also noticed the other weirdness when testing different workarounds.

Anyway, the new version seems to have solved it! We've been testing some this morning and everything loads while fast-serving, no errors! Thanks!

[s-KaiNet]

JFYI spfx-fast-serve-helpers@1.18.2 was just published and you can switch to a "normal" version instead of beta.