Error: Conflict: Multiple assets emit different content to the same filename images

[01Kuzma]

Hi! I'm trying to start an old project which was based on WebPack v3. The configuration and packages has been updated. I'm getting this error: "Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error: Conflict: Multiple assets emit different content to the same filename images/gb.svg"

mini-css-extract-plugin@1.3.1 webpack 5.4.0

× ｢wdm｣: assets by chunk 818 KiB (auxiliary name: base)
  assets by path images/ 603 KiB 6 assets
  assets by path *.svg 314 bytes 5 assets
  asset 78f07e2c2a535c26ef21d95e41bd7175.woff 79.4 KiB [emitted] (auxiliary name: base)
  asset f33df365d6d0255b586f2920355e94d7.eot 53 KiB [emitted] (auxiliary name: base) 1 related asset
  asset d2285965fe34b05465047401b8595dd0.ttf 52.8 KiB [emitted] (auxiliary name: base) 1 related asset
  asset 0cb0b9c589c0624c9c78dd3d83e946f6.woff2 29.4 KiB [emitted] (auxiliary name: base)
assets by path *.js 3.96 MiB
  asset entry.bundle.js 2.92 MiB [emitted] (name: entry) 2 related assets
  asset vendor.bundle.js 713 KiB [emitted] (name: vendor) 2 related assets
  asset base.bundle.js 355 KiB [emitted] (name: base) 2 related assets
assets by path *.css 260 KiB
  asset entry.a4a99775fee2c696253b.css 213 KiB [emitted] [immutable] (name: entry) 2 related assets
  asset base.12b80c5afd434d8f915a.css 47.4 KiB [emitted] [immutable] (name: base) 2 related assets
asset index.html 740 bytes [emitted]
Entrypoint vendor 713 KiB (954 KiB) = vendor.bundle.js 1 auxiliary asset
Entrypoint base 403 KiB (1.25 MiB) = base.12b80c5afd434d8f915a.css 47.4 KiB base.bundle.js 355 KiB 17 auxiliary assets
Entrypoint entry 3.12 MiB (3.53 MiB) = entry.a4a99775fee2c696253b.css 213 KiB entry.bundle.js 2.92 MiB 2 auxiliary assets
538 modules

ERROR in ./css/flag-icon.min.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Conflict: Multiple assets emit different content to the same filename images/gb.svg
    at Compilation.emitAsset (D:\kuzma_latest\node_modules\webpack\lib\Compilation.js:2828:6)
    at Compilation.createModuleAssets (D:\kuzma_latest\node_modules\webpack\lib\Compilation.js:3078:11)
    at D:\kuzma_latest\node_modules\webpack\lib\Compilation.js:1991:12
    at D:\kuzma_latest\node_modules\webpack\lib\Compilation.js:2191:5
    at D:\kuzma_latest\node_modules\neo-async\async.js:2818:7
    at done (D:\kuzma_latest\node_modules\neo-async\async.js:3522:9)
    at D:\kuzma_latest\node_modules\neo-async\async.js:2830:7
    at done (D:\kuzma_latest\node_modules\neo-async\async.js:2865:11)
    at D:\kuzma_latest\node_modules\neo-async\async.js:2818:7
    at D:\kuzma_latest\node_modules\webpack\lib\HookWebpackError.js:69:3
    at Hook.eval [as callAsync] (eval at create (D:\kuzma_latest\node_modules\webpack\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
    at Cache.store (D:\kuzma_latest\node_modules\webpack\lib\Cache.js:107:20)
    at ItemCacheFacade.store (D:\kuzma_latest\node_modules\webpack\lib\CacheFacade.js:142:15)
    at D:\kuzma_latest\node_modules\webpack\lib\CacheFacade.js:81:29
    at arrayEach (D:\kuzma_latest\node_modules\neo-async\async.js:2405:9)
    at Object.each (D:\kuzma_latest\node_modules\neo-async\async.js:2846:9)

ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in Conflict: Multiple assets emit different content to the same filename .gz
ERROR in   Error: The 'include' option isn't set to a recognized value: all

  - extract-chunks.js:69 extractChunks
    [kuzma_latest]/[preload-webpack-plugin]/build/lib/extract-chunks.js:69:9
  - index.js:43 PreloadPlugin.addLinks
    [kuzma_latest]/[preload-webpack-plugin]/build/index.js:43:29
  - index.js:110
    [kuzma_latest]/[preload-webpack-plugin]/build/index.js:110:31

  - new Promise
  - Hook.js:154 AsyncSeriesWaterfallHook.lazyCompileHook
    [kuzma_latest]/[tapable]/lib/Hook.js:154:20
  - index.js:261
    [kuzma_latest]/[html-webpack-plugin]/index.js:261:70
  - runMicrotasks
  - task_queues.js:93 processTicksAndRejections
    internal/process/task_queues.js:93:5

4 ERRORS in child compilations
webpack 5.4.0 compiled with 12 errors in 5031 ms
i ｢wdm｣: Failed to compile.

webpack.config.js: module.exports = {

devtool: 'source-map',

devServer: {
    historyApiFallback: true,
    contentBase: './'
},
entry: {

    "vendor": ['./js/classList.min.js', './js/jquery.nicescroll.min.js', './js/plugins.js'],
    base: ['./css/animate.css', './css/flag-icon.min.css', './css/preloader.css', './css/react-router-modal.css', './css/simple-line-icons.css', './css/responsive.css', './css/style.css', './css/outdatedbrowser.css'],
    entry: ["babel-polyfill", "index.js"]
},

optimization: {
    splitChunks: {
        chunks: 'all'
    }
},  

output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].bundle.js',
    publicPath: '/'

},
resolve: {
    extensions: ['.webpack-loader.js', '.web-loader.js', '.loader.js', '.js', '.jsx'],
    modules: [
        sourcePath,
        path.resolve(__dirname, 'node_modules')
    ],

},
plugins: [

    new CleanWebpackPlugin(),    

    new webpack.LoaderOptionsPlugin({
        options: {
            postcss: [
                autoprefixer({
                    overrideBrowserslist: [
                        'last 3 version',
                        'ie >= 10'
                    ]
                })
            ],
            context: staticSourcePath
        }
    }),

    new HtmlWebpackPlugin({            
        template: path.join(__dirname, 'index.html'),
        filename: 'index.html',
        inject: 'body',         
        excludeChunks: ['base'],            
        minify: {
            collapseWhitespace: true,
            collapseInlineTagWhitespace: true,
            removeComments: true,
            removeRedundantAttributes: true
        }
    }),

    new InterpolateHtmlPlugin(HtmlWebpackPlugin, 'production'),

    new PreloadWebpackPlugin({
        rel: 'preload',
        as: 'script',
        include: 'all',
        fileBlacklist: [/\.(css|map)$/, /base?.+/]
    }),

    new MiniCssExtractPlugin({
        filename: '[name].[contenthash].css',
    }), 

    new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip',
        test: /\.js$|\.css$|\.html$|\.eot?.+$|\.ttf?.+$|\.woff?.+$|\.svg?.+$/,
        threshold: 10240,
        minRatio: 0.8
    })
],

optimization: {
    minimizer: [
      new OptimizeCssAssetsPlugin({
        cssProcessorOptions: {
          map: {
            inline: false,
            annotation: true,
          },
        },
      }),

      new TerserPlugin({
        parallel: true,
        minify: (file, sourceMap) => {
          const uglifyJsOptions = {
          };

          if (sourceMap) {
            uglifyJsOptions.sourceMap = {
              content: sourceMap,
            };
          }

          return require("uglify-js").minify(file, uglifyJsOptions);
        },
      }),
    ],
},          

module: {

    rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['env', 'react', 'stage-1'],
                }
            },
            include: sourcePath
        },

        {
            test: /\.css$/,
            use: [
              MiniCssExtractPlugin.loader,
              'css-loader',
            ],
        },      

        {
            test: /\.woff2?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            use: 'url-loader?limit=10000',
        },
        {
            test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
            use: 'file-loader',
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                'file-loader?name=images/[name].[ext]',
                'image-webpack-loader?bypassOnDebug'
            ]
        },

        {
            test: /font-awesome\.config\.js/,
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'font-awesome-loader'
                }
            ]
        },

        {
            test: /bootstrap\/dist\/js\/umd\//,
            use: 'imports-loader?jQuery=jquery'
        }

    ]
},

};

[alexander-akait]

Please update plugins firstly, you don't need webpack.LoaderOptionsPlugin. We have guide how to do it, please follow https://webpack.js.org/migrate/4/ and https://webpack.js.org/migrate/5/

[alexander-akait]

You have two loaders for emit the same assets:

 {
            test: /\.(ttf|eot|svg)(\?[\s\S]+)?$/,
            use: 'file-loader',
        },
        {
            test: /\.(jpe?g|png|gif|svg)$/i,
            use: [
                'file-loader?name=images/[name].[ext]',
                'image-webpack-loader?bypassOnDebug'
            ]
        },

[alexander-akait]

Look at the svg extension

[01Kuzma]

Thank you! I will try