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

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