HookWebpackError: Invalid URL: /link.e767e2ededb63bd7f5dd.svg

• webpack Version: 5.44.0
• css-loader Version: 6.0.0

Expected Behavior

css-loader 6.0.0 should work fine with mini-css-extract-plugin.

Actual Behavior

It throws error:

03:07:24.853 | ERROR in ./styles/index.scss
-- | --
03:07:24.853 | Module build failed (from ../node_modules/mini-css-extract-plugin/dist/loader.js):
03:07:24.853 | HookWebpackError: Invalid URL: /link.e767e2ededb63bd7f5dd.svg
03:07:24.853 | at tryRunOrWebpackError (/vercel/path0/node_modules/webpack/lib/HookWebpackError.js:88:9)
03:07:24.853 | at __webpack_require_module__ (/vercel/path0/node_modules/webpack/lib/Compilation.js:4308:12)
03:07:24.853 | at __webpack_require__ (/vercel/path0/node_modules/webpack/lib/Compilation.js:4265:18)
03:07:24.853 | at /vercel/path0/node_modules/webpack/lib/Compilation.js:4336:20
03:07:24.853 | at symbolIterator (/vercel/path0/node_modules/neo-async/async.js:3485:9)
03:07:24.853 | at done (/vercel/path0/node_modules/neo-async/async.js:3527:9)
03:07:24.853 | at Hook.eval [as callAsync] (eval at create (/vercel/path0/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
03:07:24.854 | at /vercel/path0/node_modules/webpack/lib/Compilation.js:4243:43
03:07:24.854 | at symbolIterator (/vercel/path0/node_modules/neo-async/async.js:3482:9)
03:07:24.854 | at timesSync (/vercel/path0/node_modules/neo-async/async.js:2297:7)
03:07:24.854 | -- inner error --
03:07:24.854 | TypeError [ERR_INVALID_URL]: Invalid URL: /link.e767e2ededb63bd7f5dd.svg
03:07:24.854 | at onParseError (internal/url.js:279:9)
03:07:24.854 | at new URL (internal/url.js:355:5)
03:07:24.854 | at Module.<anonymous> (/vercel/path0/node_modules/css-loader/dist/cjs.js!/vercel/path0/node_modules/postcss-loader/dist/cjs.js!/vercel/path0/node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!/vercel/path0/src/styles/index.scss:9:37)
03:07:24.854 | at /vercel/path0/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:426:11
03:07:24.854 | at Hook.eval [as call] (eval at create (/vercel/path0/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
03:07:24.854 | at /vercel/path0/node_modules/webpack/lib/Compilation.js:4310:39
03:07:24.854 | at tryRunOrWebpackError (/vercel/path0/node_modules/webpack/lib/HookWebpackError.js:83:7)
03:07:24.854 | at __webpack_require_module__ (/vercel/path0/node_modules/webpack/lib/Compilation.js:4308:12)
03:07:24.855 | at __webpack_require__ (/vercel/path0/node_modules/webpack/lib/Compilation.js:4265:18)
03:07:24.855 | at /vercel/path0/node_modules/webpack/lib/Compilation.js:4336:20

How Do We Reproduce?

1. Clone code from https://github.com/webpack/webpack.js.org/pull/5185
2. run yarn
3. run yarn start

Here’s the possible code https://github.com/webpack/webpack.js.org/blob/master/src/styles/index.scss#L28 causing the problem.

[axibyte]

Had the same issue. Setting esModule to false in the “css-loader” options resolved the issue. Under “Breaking Changes” for css-loader version 6.0.0 it says: “new URL() syntax used for url(), only when the esModules option is enabled (enabled by default), it means you can bundle CSS for libraries”

[alexander-akait]

@wuliqiangqiang Please provide reproducible repo