Webpack 5 Module Federation + splitchunks.chunks "all" error - webpack-5

Question

I've been working on using ModuleFederation and have ran into an issue where if the remote webpack configuration had optimize.splitChunks.chunk = "all" then the host application would throw a loadScript exception. This could be a complete fundamental knowledge gap on my part why that wouldn't work. I haven't seen any documentation on not using that option along with Module Federation.
Has anyone had similar experiences or can tell me why it's a conflicting setting?
Thanks for your help!
remote webpack.config.js
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { ModuleFederationPlugin } = webpack.container;
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1338,
},
output: {
publicPath: "auto",
},
optimization: {
splitChunks: {
chunk: "all"
}
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "comic",
filename: "remoteEntry.js",
exposes: {
"./XKCD": "./app.jsx",
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};
host webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack").container
.ModuleFederationPlugin;
const path = require("path");
module.exports = {
entry: "./index.js",
mode: "development",
devServer: {
contentBase: path.join(__dirname, "dist"),
port: 1337,
},
output: {
publicPath: "auto",
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: "babel-loader",
exclude: /node_modules/,
options: {
presets: ["#babel/preset-react"],
},
},
],
},
plugins: [
new ModuleFederationPlugin({
name: "home",
filename: "remoteEntry.js",
remotes: {
comic: `comic#http://localhost:1338/remoteEntry.js)`,
},
shared: [
{
react: { singleton: true, eager: true },
"react-dom": { singleton: true, eager: true },
},
],
}),
new HtmlWebpackPlugin({
template: "./index.html",
}),
],
};

Answer 1

I have a similar problem.
I change the remote webpack.config.js optimization.splitChunks as
optimization: {
splitChunks: {
chunks: 'async'
}
}
This problem is fixed.
Maybe you can try it.
Sorry my pool english