webpack-cli Error: Conflict: Multiple chunks emit assets to the same filename

Question

I am trying to generate my own webpack config and have some problems generate a bundle.

Error: [webpack-cli] Error: Conflict: Multiple chunks emit assets to the same filename billing-dashboard-ui.js (chunks main and runtime)

Changing my output filename from 'my-app.js' to 'my-app.[contentHash].js works, but I can't use this because another issues in my personal project, so I should always generate my-app.js.

Code

My file webpack.config.js

const webpack = require('webpack')
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

module.exports = (env, argv) => {
  const isDevelopment = argv.mode === 'development'
  const isStaging = process.env.BABEL_ENV === 'staging' || process.env.NODE_ENV === 'staging'

  return {
    entry: './src/index.js',
    mode: isDevelopment || isStaging ? 'development' : 'production',
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: 'my-app.js',
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.jsx'],
      alias: {
        components: path.resolve(__dirname, 'src/components/'),
        assets: path.resolve(__dirname, 'src/assets/'),
        constants: path.resolve(__dirname, 'src/constants/'),
        containers: path.resolve(__dirname, 'src/containers/'),
        utils: path.resolve(__dirname, 'src/utils/'),
        services: path.resolve(__dirname, 'src/services/'),
      },
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          exclude: /node_modules/,
          use: [
            {
              loader: 'ts-loader',
              options: {
                transpileOnly: true,
              },
            },
          ],
        },
        {
          test: /\.jsx?$/,
          use: 'babel-loader',
          exclude: /node_modules/,
        },
        {
          test: /\.css$/,
          use: ['style-loader', 'css-loader'],
        },
      ],
    },
    plugins: [
      new webpack.DefinePlugin({
        'process.env.BABEL_ENV': JSON.stringify(process.env.BABEL_ENV),
      }),
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        template: 'public/index.html',
        filename: 'index.html',
        minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true,
        },
        chunksSortMode: 'dependency',
      }),
    ],
    optimization: {
      runtimeChunk: 'single',
      splitChunks: false,
    },
  }
}

and my .babelrc file

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ],
  "plugins": [
    // your plugins
  ]
}

score 0 · Answer 1 · answered Mar 02 '23 at 11:55

I've just resolved this issue by adding this

optimization: {
  splitChunks: {
    cacheGroups: {
      vendor: {
        filename: 'vendor.bundle.js',
        test: /[\\/]node_modules[\\/](jquery|bootstrap|reflect-metadata)[\\/]/,
        chunks: 'all',
      },
    },
  },
},

webpack-cli Error: Conflict: Multiple chunks emit assets to the same filename

1 Answers1