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",
        }),
    ],
};

Kenyatta

I have this error too. and i spend two day to find the reason. I suggest to add error info in to the question name or content. In order to let people search and find this question. 'TypeError: Cannot read properties of undefined (reading 'get')','ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'init')' – Enthronement

One thing I see is inside of splitChunks you have "chunk" but it should be plural "chunks". – Urge

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

Cacoepy

Tried this. But the application calling this chunk is searching from its current base url instead of remote. – Myrlmyrle

@VigneshM Set the publicPath to auto – Cutler