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

2 Answers 2

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}`,
},