Webpack 5 模块联邦 + splitchunks.chunks "all" 错误

Question

我一直在使用ModuleFederation，并遇到了一个问题，如果远程webpack配置中有optimize.splitChunks.chunk = "all"，则主机应用程序将抛出loadScript异常。这可能是我对基本知识的完全缺失导致它不起作用。我没有看到任何关于不使用该选项以及Module Federation的文档。

是否有人有类似的经验或者可以告诉我为什么这是一种冲突的设置？

感谢您的帮助！

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

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

- Michael Simonitsch

---

我也遇到了这个错误，花了两天时间找原因。建议将错误信息添加到问题名称或内容中，以便让人们搜索和找到这个问题。“TypeError: Cannot read properties of undefined (reading 'get')”，“ERROR Error: Uncaught (in promise): TypeError: Cannot read properties of undefined (reading 'init')” - King.

我看到的一个问题是在splitChunks中，你使用了“chunk”，但应该是复数形式的“chunks”。 - Stephen Brickner

Answer 1

我有一个类似的问题。 我将远程webpack.config.js文件中的optimization.splitChunks更改为

optimization: {
  splitChunks: {
    chunks: 'async'
  }
}

这个问题已经解决。 也许你可以尝试一下。 很抱歉我的英语不太好。

- LaNaka

---

尝试过这个。但是调用此代码块的应用程序正在从其当前基本URL而不是远程位置进行搜索。 - Vignesh M

@VigneshM 将 publicPath 设置为 auto。 - Ashwin Mothilal