Using url() in CSS requires publicPath to be set with Webpack 5

[evpaassen]

• Operating System: Windows 10
• Node Version: 14.15.0
• NPM Version: not npm, but yarn 1.22.5
• webpack Version: 5.24.0
• mini-css-extract-plugin Version: 1.3.8

Expected Behavior

The situation is: there is a CSS file referencing an asset through url("..."), let's say a PNG. This CSS file is loaded by css-loader and the PNG by file-loader (Webpack 4) or an asset module (Webpack 5). I expect this to work with both Webpack 4 and 5, and a valid CSS file to be produced in the dist directory.

Actual Behavior

Webpack 5 prints the error Automatic publicPath is not supported in this browser:

$ webpack
assets by status 1.42 KiB [cached] 2 assets
./css/test.css 39 bytes [built] [code generated] [1 error]

ERROR in ./css/test.css
Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
Error: Automatic publicPath is not supported in this browser
    at C:\git\webpack-repro\node_modules\css-loader\dist\cjs.js!C:\git\webpack-repro\src\css\test.css:243:34
    at C:\git\webpack-repro\node_modules\css-loader\dist\cjs.js!C:\git\webpack-repro\src\css\test.css:246:13
    at Object.<anonymous> (C:\git\webpack-repro\node_modules\css-loader\dist\cjs.js!C:\git\webpack-repro\src\css\test.css:256:12)
    at Module._compile (C:\git\webpack-repro\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at evalModuleCode (C:\git\webpack-repro\node_modules\mini-css-extract-plugin\dist\utils.js:42:10)
    at C:\git\webpack-repro\node_modules\mini-css-extract-plugin\dist\loader.js:214:57
    at C:\git\webpack-repro\node_modules\webpack\lib\Compiler.js:513:11
    at C:\git\webpack-repro\node_modules\webpack\lib\Compiler.js:1065:17
    at Hook.eval [as callAsync] (eval at create (C:\git\webpack-repro\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (C:\git\webpack-repro\node_modules\tapable\lib\Hook.js:18:14)

webpack 5.24.0 compiled with 1 error in 359 ms

However, when I set output.publicPath to '', everything seems to work correctly. With Webpack 4, the issue doesn't exist.

More information can also be found here: https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser. This StackOverflow post shows many people are experiencing the issue and there are workarounds available, but there's no real explanation or fix. (I guess it's a bug, because it works with Webpack 4 and Webpack should rely on sensible defaults.)

Code

I created a minimal test case that demonstrates the issue:

// webpack.config.js
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    mode: 'production',
    context: path.resolve(__dirname, 'src'),
    entry: './css/test.css',
    output: {
        clean: true,

        // Workaround for the 'Automatic publicPath is not supported in this browser' error in Webpack 5 / mini-css-extract-plugin.
        // See: https://stackoverflow.com/questions/64294706/webpack5-automatic-publicpath-is-not-supported-in-this-browser
        // Uncomment the next line to make it work.
        // publicPath: "",
    },
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                ],
            },
            {
                test: /\.png$/i,
                type: 'asset/resource'
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin(),
    ],
};

How Do We Reproduce?

There is a repository containing a minimal reproduction here: https://github.com/evpaassen/webpack-repro.

• The master branch contains a version with Webpack 5. This version shows the error when running webpack.
• The webpack4 branch uses Webpack 4 and this version doesn't show the error and the webpack build just succeeds.

I included the Yarn lock file, so you can reproduce the exact same setup using Yarn 1.22.5.

[evpaassen]

Thanks a lot for fixing it!

[samuelkobe]

@evpaassen how do I get the merged fix? Thank you!

[evpaassen]

@evpaassen how do I get the merged fix? Thank you!

The fix is included in version 1.3.9. So you should just upgrade the mini-css-extract-plugin package.

[samuelkobe]

@evpaassen forgot to re-run npm install after updating... durr