module-federation-examples: Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.

As mentioned by nrz2000 disabling splitChunks worked, but I didn’t understand why, so I checked vue-cli code to see how they were configuring SplitChunks plugin.

And here it is what I got so far:

Comparing the config from vue-cli and the default webpack config from the official website we can get some answers.

Code copied from vue-cli:

https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/config/app.js#L41-L60

      webpackConfig.optimization.splitChunks({
        cacheGroups: {
          defaultVendors: {
            name: `chunk-vendors`,
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'initial'
          },
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'initial',
            reuseExistingChunk: true
          }
        }
      })

Code copied from webpack docs:

https://webpack.js.org/plugins/split-chunks-plugin/#optimizationsplitchunks

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async',
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30,
      maxInitialRequests: 30,
      enforceSizeThreshold: 50000,
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
          reuseExistingChunk: true,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

So the main difference between the two configs is that webpack uses by default chunks: 'async' while vue-cli uses chunks: initial, and this seems to be the reason behind the error with module federation. I changed my vue-config to the following and it solved the problem:

Note that it’s the same configuration as vue-cli, but just changing the chunks property on both cache groups from initial to async

optimization: {
      splitChunks: {
        cacheGroups: {
          defaultVendors: {
            name: `chunk-vendors`,
            test: /[\\/]node_modules[\\/]/,
            priority: -10,
            chunks: 'async',
            reuseExistingChunk: true
          },
          common: {
            name: `chunk-common`,
            minChunks: 2,
            priority: -20,
            chunks: 'async',
            reuseExistingChunk: true
          }
        }
      }
    }

Still, I don’t know the specific reason, in this stackoverflow thread they explain the differences between the three possible split chunk values: async, all and initial. I tried with ‘all’ and the error persists. I think it’s related to the nature of module federation that relies on async chunks, so trying optimizing static chunks throw errors, but I’m just speculating here. Hope someone has some answers.

Public path is probably incorrect

Finally, it’s not webpack config error. I create a demo here

the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far.

For me, I will create a PR for vue3-demo, it doesn’t contain how to use routes in remote repo.

this issue closed

兄弟，有发现问题吗？我现在也遇到同样的问题

Finally, it’s not webpack config error. I create a demo here the problem related to vue-cli & vue.config.js, but I cannot find out the reason why it failed in vue-cli so far. For me, I will create a PR for vue3-demo, it doesn’t contain how to use routes in remote repo. this issue closed

兄弟，有发现问题吗？我现在也遇到同样的问题

我这边发现问题了，是qiannkun沙箱问题，暂时通过配置library: { type: ‘window’, name: ‘xxx’ } 来解决

based on @gabrielmaschke and @ScriptedAlchemy 's solution, the following worked for me

common: {
    name: `chunk-common`,
    minChunks: 3,
    enforce: true,
    priority: -20,
    chunks: 'async',
    reuseExistingChunk: true,
    test(module) {
        if (
            module.type === 'provide-module' ||
            module.type === 'consume-shared-module' ||
            module.type === 'remote-module'
        ) {
            return false;
        }
        return true;
    }
}

I am not sure how to fix this in webpack. since all module types are derived classes of Module, they get sent to the SplitChunksPlugin. It does not make sense to add a condition in the SplitChunksPlugin to check for this but I cant find where else to fix it @ScriptedAlchemy any help here? If we cant fix this, I am willing to send a PR to the docs to add this to the troubleshooting section because this is important from a loading time pov

Chunks also accepts function. So all, initial, async or function. Use function and test chunks to see if they contain remote-module or provide-module type, return false for those and true for any others. That lets you exclude MF manages chunks from split chunks algorithms

I’m using vue-cli with vue3 and disabling splitChunks was the solution for me. #https://github.com/vuejs/vue-cli/issues/6318#issuecomment-786603459