ScriptExternalLoadError: Loading script failed.

[singhbipin2117]

HostApp webconfig setup

{
  entry: './src/index',
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3001
  },
  optimization: {
    minimize: false,
    runtimeChunk: true
  },
  output: {
    publicPath: 'auto'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react']
        }
      }
    ]
  },
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      remotes: {
        app2: 'app2@[app1Url]/remoteEntry.js'
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    }),
    new ExternalTemplateRemotesPlugin(),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      excludeChunks: ['app1']
    })
  ]
}

RemoteApp webconfig setup

{
  entry: './src/index',
  mode: 'development',
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    port: 3002
  },
  optimization: {
    minimize: false,
    runtimeChunk: true
  },
  output: {
    publicPath: 'auto'
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        options: {
          presets: ['@babel/preset-react']
        }
      }
    ]
  },
  plugins: [
    // To learn more about the usage of this plugin, please visit https://webpack.js.org/plugins/module-federation-plugin/
    new ModuleFederationPlugin({
      name: 'app2',
      library: { type: 'var', name: 'app2' },
      filename: 'remoteEntry.js',
      exposes: {
        './App': './src/App'
      },
      shared: { react: { singleton: true }, 'react-dom': { singleton: true } }
    }),
    new HtmlWebpackPlugin({
      template: './public/index.html',
      excludeChunks: ['app2']
    })
  ]
};

in the remote app config if i am removing optimization option it is working fine but with optimization option it is giving me error like ScriptExternalLoadError: Loading script failed.

[ScriptedAlchemy]

Don’t create a runtime chunk? That usually causes problems with the remote because webpack deduplicates the runtime requirements.

[wenyichen]

I ran into this issue and the problem ended up being running the host app in VSCode terminal instead of the OS terminal

[m-mohammad-d]

I had the same issue. I had the runtime chunk enabled in my configuration, and that caused problems with loading the remote entry. Once I disabled the runtime chunk, the problem was fixed.

[ScriptedAlchemy]

You can look in runtime plugin folder for si gle runtime example in module federation examples repo to see how to deal with si gle runtime chunks.