2.4.2 Breaks on urls

[gpoitch]

Bug report

Actual Behavior

Every instance of a url e.g.:

.foo {
  background: url('./icon.svg');
}

Throws a build error:

ModuleBuildError: Module build failed (from ../../node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Invalid URL

Since upgrading from 2.3.0 -> 2.4.2

Expected Behavior

The build should succeed. Nothing else changed. The file path is valid.

I am on the latest webpack (5.58.1).
Setting experimentalUseImportModule: false fixes it but I'm not sure what that does.
Might be an unintentional breaking change.

How Do We Reproduce?

Please paste the results of npx webpack-cli info here, and mention other relevant information

 System:
    OS: macOS 11.6
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.10.0
    npm: 8.0.0
  Browsers:
    Safari: 15.0
  Packages:
    css-loader: ^6.4.0 => 6.4.0 
    esbuild-loader: ^2.16.0 => 2.16.0 
    html-webpack-plugin: ^5.3.2 => 5.3.2 
    postcss-loader: ^6.1.1 => 6.1.1 
    webpack: ^5.58.1 => 5.58.1 
    webpack-dev-middleware: ^5.2.1 => 5.2.1 

[alexander-akait]

It means you have wrong urls, maybe out of root project, without reproducible example I can't help

[alexander-akait]

Or please provide options for plugin

[gpoitch]

No options for the plugin.

I figured it out:

{
  test: /\.svg/,
  type: 'asset/resource',
  generator: {
-    publicPath: isDev ? '/' : 'https://foo.com/assets/'
+    publicPath: isDev ? undefined : 'https://foo.com/assets/'
  }
}

This was a long standing app with that config for a couple years fyi.

[aleen42]

I found that the following options works for me to solve this breaking change:

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
-         MiniCssExtractPlugin['loader'],
+         {
+           loader: MiniCssExtractPlugin['loader'],
+           options: { publicPath: '' },
+         },
          'css-loader',
        ],
      },
    ],
  },
};