Invalid URL error if publicPath is set to relative path in generator option (webpack 5)

[tranvansang]

Bug report

It took me hours to strip down my webpack config to obtain the error.
I solved the bug with a workaround by removing the publicPath option in asset type's generator option. I just report it here if anyone knows where to fix and submit a PR later.

Actual Behavior

MiniCssExtractPlugin throws an invalid URL error if publicPath option is set to a relative, non-undefined value in asset's generator's publicPath option.

Expected Behavior

It shouldn't produce any error regardless of whether publicPath is relative or absolute.

How Do We Reproduce?

webpack config

output: {publicPath: '/bundles/'},
module: {
  rules: [
    {test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader']},
    {test: /\.jpg$/, type: 'asset', generator: {publicPath: '/bundles/'}}
  ]
},
plugins: [new MiniCssExtractPlugin()]

entry file: main.css

body {
  background: url('./foo.jpg');
}

In type: 'asset''s generator config, if publicPath is removed, webpack runs fine. If publicPath is absolute URL, also fine. But if publicPath is /bundles/, webpack fails with the following error

ERROR in ./src/client/components/styles/tailwind.tw.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Invalid URL
    at tryRunOrWebpackError (/home/transang/artflag/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/transang/artflag/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/transang/artflag/node_modules/webpack/lib/Compilation.js:4936:18)
    at /home/transang/artflag/node_modules/webpack/lib/Compilation.js:5007:20
    at symbolIterator (/home/transang/artflag/node_modules/neo-async/async.js:3485:9)
    at done (/home/transang/artflag/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/transang/artflag/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /home/transang/artflag/node_modules/webpack/lib/Compilation.js:4914:43
    at symbolIterator (/home/transang/artflag/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/transang/artflag/node_modules/neo-async/async.js:2297:7)
-- inner error --
TypeError: Invalid URL
    at new NodeError (node:internal/errors:370:5)
    at onParseError (node:internal/url:536:9)
    at new URL (node:internal/url:612:5)
    at Module.<anonymous> (/home/transang/artflag/node_modules/css-loader/dist/cjs.js!/home/transang/artflag/src/client/components/styles/tailwind.tw.scss:15:37)
    at /home/transang/artflag/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:432:11
    at Hook.eval (eval at create (/home/transang/artflag/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /home/transang/artflag/node_modules/webpack/lib/Compilation.js:4981:39
    at tryRunOrWebpackError (/home/transang/artflag/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/transang/artflag/node_modules/webpack/lib/Compilation.js:4979:12)
    at __webpack_require__ (/home/transang/artflag/node_modules/webpack/lib/Compilation.js:4936:18)

Generated code for /home/transang/artflag/node_modules/css-loader/dist/cjs.js!/home/transang/artflag/src/client/components/styles/tailwind.tw.scss
 1 | __webpack_require__.r(__webpack_exports__);
 2 | /* harmony export */ __webpack_require__.d(__webpack_exports__, {
 3 | /* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
 4 | /* harmony export */ });
 5 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("/home/transang/artflag/node_modules/css-loader/dist/runtime/sourceMaps.js");
 6 | /* harmony import */ var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 7 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__("/home/transang/artflag/node_modules/css-loader/dist/runtime/api.js");
 8 | /* harmony import */ var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 9 | /* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__("/home/transang/artflag/node_modules/css-loader/dist/runtime/getUrl.js");
10 | /* harmony import */ var _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__);
11 | // Imports
12 | 
13 | 
14 | 
15 | var ___CSS_LOADER_URL_IMPORT_0___ = new URL(/* asset import */ __webpack_require__("asset|/home/transang/artflag/src/client/components/styles/a.jpg"), __webpack_require__.b);
16 | var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
17 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default()(___CSS_LOADER_URL_IMPORT_0___);
18 | // Module
19 | ___CSS_LOADER_EXPORT___.push([module.id, "body {\n\tbackground: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}", "",{"version":3,"sources":["webpack://./src/client/components/styles/tailwind.tw.scss"],"names":[],"mappings":"AAAA;CACC,mDAA0B;AAC3B","sourcesContent":["body {\n\tbackground: url('./a.jpg');\n}"],"sourceRoot":""}]);
20 | // Exports
21 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
22 | 
 @ ./src/client/clientMain.tsx 1:0-52

[alexander-akait]

Duplicate #872