css-loader conflicts with file-loader about css-loader HOT 2 CLOSED

Just ran into the same issue. It turns out file-loader is deprecated. If you still need file-loader, simply downgrade css-loader to ^5.2.7, otherwise here's what I did:

I replaced file-loader:

{
  test: /\.(jpg|png|svg|bin|glb|mp3|mp4|webm|eot|woff|ttf|otf)$/,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: 'assets/[name].[hash:8].[ext]',
        esModule: false
      }
    }
  ]
}

With asset/resource:

{
  test: /\.(jpg|png|svg|bin|glb|mp3|mp4|webm|eot|woff|ttf|otf)$/,
  type: 'asset/resource'
}

And moved the path pattern in the output parameter:

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  assetModuleFilename: 'assets/[hash][ext][query]'
}

from css-loader.

Please avoid using file-loader and migrate to asset modules, here more infromation https://webpack.js.org/guides/asset-modules/, another solutions is set esModule: false or set type: 'javascript/auto', feel free to feedback

from css-loader.