javascript - Webpack, optimization chunking gives "Conflict: Multiple chunks emit assets to the same filename"

admin管理员组

文章数量:1398779

Info

I am trying to generate my own webpack config and have some problems getting it working.

Problem

When trying to use optimization to split files into chunks I get the a error like underneath

Error: Conflict: Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and vendors-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2)

If I remove the optimization section it works but without chunking. I have looked to the create react app webpack.config.js to get something to reference while generating this.

As you can see they have the optimization section working with chunking in both development and production. Why do I get the conflict error when using it?

Code

Minified/simplified version of my config (runtimeChunk disabled, as it also gives the same conflict error)

webpack.config.js

module.exports = () => {
    process.env.NODE_ENV = "development";
    process.env.BABEL_ENV = "development";

    return {
        mode: "development",
        entry: ["react-hot-loader/patch", "./src"],
        output: {
            path: undefined,
            publicPath: "/",
            filename: "static/js/bundle.js",
            chunkFilename: "static/js/[name].chunk.js",
        },
        optimization: {
            minimize: false,
            splitChunks: {
                chunks: "all",
                name: false
            },
            // runtimeChunk: {
            //     name: (entrypoint) => `runtime-${entrypoint.name}`,
            // },
        },
        resolve: {
            modules: [path.join(__dirname, "src"), "node_modules"],
            alias: {
                "react-dom": "@hot-loader/react-dom",
            },
        },
        module: {
            rules: [
                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    include: path.resolve(__dirname, "./src"),
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                template: path.resolve(__dirname, "./public/index.html"),
            }),
            new webpack.HotModuleReplacementPlugin(),
        ],
        devServer: {
            compress: true,
            hot: true,
            contentBase: "./build",
            historyApiFallback: true,
        },
        devtool: "inline-source-map",
    };
};

.babelrc

{"presets": [["react-app", {"runtime": "automatic"}]]}

Info

I am trying to generate my own webpack config and have some problems getting it working.

Problem

When trying to use optimization to split files into chunks I get the a error like underneath

Error: Conflict: Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and vendors-node_modules_react-hot-loader_patch_js-node_modules_react_jsx-dev-runtime_js-node_mod-4610d2)

If I remove the optimization section it works but without chunking. I have looked to the create react app webpack.config.js to get something to reference while generating this.

As you can see they have the optimization section working with chunking in both development and production. Why do I get the conflict error when using it?

Code

Minified/simplified version of my config (runtimeChunk disabled, as it also gives the same conflict error)

webpack.config.js

module.exports = () => {
    process.env.NODE_ENV = "development";
    process.env.BABEL_ENV = "development";

    return {
        mode: "development",
        entry: ["react-hot-loader/patch", "./src"],
        output: {
            path: undefined,
            publicPath: "/",
            filename: "static/js/bundle.js",
            chunkFilename: "static/js/[name].chunk.js",
        },
        optimization: {
            minimize: false,
            splitChunks: {
                chunks: "all",
                name: false
            },
            // runtimeChunk: {
            //     name: (entrypoint) => `runtime-${entrypoint.name}`,
            // },
        },
        resolve: {
            modules: [path.join(__dirname, "src"), "node_modules"],
            alias: {
                "react-dom": "@hot-loader/react-dom",
            },
        },
        module: {
            rules: [
                {
                    test: /\.(js|mjs|jsx|ts|tsx)$/,
                    include: path.resolve(__dirname, "./src"),
                    exclude: /node_modules/,
                    use: ["babel-loader"],
                },
            ],
        },
        plugins: [
            new HtmlWebpackPlugin({
                inject: true,
                template: path.resolve(__dirname, "./public/index.html"),
            }),
            new webpack.HotModuleReplacementPlugin(),
        ],
        devServer: {
            compress: true,
            hot: true,
            contentBase: "./build",
            historyApiFallback: true,
        },
        devtool: "inline-source-map",
    };
};

.babelrc

{"presets": [["react-app", {"runtime": "automatic"}]]}

• javascript
• reactjs
• webpack
• webpack-dev-server

Share Improve this question Follow asked Mar 3, 2021 at 8:43 RajohanRajohan 1,41522 gold badges1414 silver badges3232 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 15

Got it to work had to change filename: "static/js/bundle.js" to filename: "static/js/[name].js"

output: {
    path: undefined,
    publicPath: "/",
    filename: "static/js/[name].js",
    chunkFilename: "static/js/[name].chunk.js",
}

If you are working on an ejected Create React App and you get a similar error

Multiple chunks emit assets to the same filename static/js/bundle.js (chunks main and runtime-main)

you can just change the filename property in the output configuration from

filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/bundle.js',

to

filename: isEnvProduction
        ? 'static/js/[name].[contenthash:8].js'
        : isEnvDevelopment && 'static/js/[name].js',

Where the [name] placeholder is giving a different name to each output bundle instead of a fixed one.

In my case it was caused by the runtime-main.js file which I was generating with the runtimeChunk property inside optimization.

runtimeChunk: {
  name: entrypoint => `runtime-${entrypoint.name}`,
},

本文标签：