Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed.

webpack version: 5.20.0

error message

warining: Initialization of sharing external failed: ScriptExternalLoadError: Loading script failed. error: Uncaught (in promise) ScriptExternalLoadError: Loading script failed.

similar issue: (#307)

I already used syntax like app2: "app2@http://localhost:3002/remoteEntry.js" , but the browser still report the error.

Here’s my config:

app1

app2

other

I am sure I have read shared-routes2 folder in this repo.

The difference between my demo and shared-routes is this different framework.

I use vue-cli in my demo.

I inspect the generated webpack config:

/* config.plugin('mf') */
// app1
new ModuleFederationPlugin(
  {
    name: 'app1',
    filename: 'remoteEntry.js',
    remotes: {
      app2: 'app2@http://localhost:8082/remoteEntry.js'
    },
    exposes: {},
    shared: {
      vue: {
        eager: true,
        singleton: true,
        requiredVersion: '^2.6.11'
      },
      'vue-router': {
        eager: true,
        singleton: true,
        requiredVersion: '^3.4.3'
      }
    }
  }
)

// app2
/* config.plugin('mf') */
new ModuleFederationPlugin(
  {
    name: 'app2',
    filename: 'remoteEntry.js',
    exposes: {
      './routes': './src/router/index.ts'
    },
    shared: {
      vue: {
        eager: true,
        singleton: true,
        requiredVersion: '^2.6.11'
      },
      'vue-router': {
        eager: true,
        singleton: true,
        requiredVersion: '^3.4.3'
      }
    }
  }
)

[gabrielmaschke]

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.

[HolyZheng]

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’ } 来解决