Invalid URL when css use background image

[Jerry-Hong]

Operating System: Macos 13.0
Node Version: v16.17.1
NPM Version: 8.19.2
webpack Version: 5.75.0
css-loader Version: 6.7.3

Bug report

css-loader cannot load css correctly when css use background-image in webpack5(use asset/resource)

Actual Behavior

originalExports /Users/mingchenhong/webpack5-css-loader-image-issue/src/main.module.css.webpack[javascript/auto]!=!/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!/Users/mingchenhong/webpack5-css-loader-image-issue/src/main.module.css
node:internal/process/promises:279
            triggerUncaughtException(err, true /* fromPromise */);
            ^

HookWebpackError: Invalid URL
    at tryRunOrWebpackError (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5015:18)
    at /Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5086:20
    at symbolIterator (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:3485:9)
    at done (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:15:1)
    at /Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:4993:43
    at symbolIterator (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:3482:9)
    at timesSync (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/neo-async@2.6.2/node_modules/neo-async/async.js:2297:7)
-- inner error --
TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:387:5)
    at URL.onParseError (node:internal/url:564:9)
    at new URL (node:internal/url:640:5)
    at Module.<anonymous> (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!/Users/mingchenhong/webpack5-css-loader-image-issue/src/main.module.css:15:37)
    at /Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/tapable@2.2.1/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at /Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5060:39
    at tryRunOrWebpackError (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5058:12)
    at __webpack_require__ (/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/webpack@5.75.0_webpack-cli@5.0.1/node_modules/webpack/lib/Compilation.js:5015:18)

Generated code for /Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!/Users/mingchenhong/webpack5-css-loader-image-issue/src/main.module.css
 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_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/noSourceMaps.js */ "/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/noSourceMaps.js");
 6 | /* harmony import */ var _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0__);
 7 | /* harmony import */ var _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/api.js */ "/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/api.js");
 8 | /* harmony import */ var _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__);
 9 | /* harmony import */ var _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/getUrl.js */ "/Users/mingchenhong/webpack5-css-loader-image-issue/node_modules/.pnpm/css-loader@6.7.3_webpack@5.75.0/node_modules/css-loader/dist/runtime/getUrl.js");
10 | /* harmony import */ var _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_getUrl_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_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__(/*! ./images/bg.png */ "asset|/Users/mingchenhong/webpack5-css-loader-image-issue/src/images/bg.png"), __webpack_require__.b);
16 | var ___CSS_LOADER_EXPORT___ = _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_pnpm_css_loader_6_7_3_webpack_5_75_0_node_modules_css_loader_dist_runtime_noSourceMaps_js__WEBPACK_IMPORTED_MODULE_0___default()));
17 | var ___CSS_LOADER_URL_REPLACEMENT_0___ = _node_modules_pnpm_css_loader_6_7_3_webpack_5_75_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, ".f48igO_1iEJpmCDN3AjE {\n  color: red;\n  background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}", ""]);
20 | // Exports
21 | ___CSS_LOADER_EXPORT___.locals = {
22 | 	"container": "f48igO_1iEJpmCDN3AjE"
23 | };
24 | /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
25 |  {

Expected Behavior

Javascript can import css that contain background-image and url will be transform to public path.

How Do We Reproduce?

https://github.com/Jerry-Hong/webpack5-css-loader-image-issue

npm i
npm run build

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

System:
OS: macOS 13.0
CPU: (8) arm64 Apple M2
Memory: 44.70 MB / 16.00 GB
Binaries:
Node: 16.17.1 - ~/.nvm/versions/node/v16.17.1/bin/node
Yarn: 1.22.19 - ~/.nvm/versions/node/v16.17.1/bin/yarn
npm: 8.19.2 - ~/.nvm/versions/node/v16.17.1/bin/npm
Browsers:
Brave Browser: 106.1.44.105
Safari: 16.1
Packages:
css-loader: ^6.7.3 => 6.7.3
esbuild-loader: ^2.20.0 => 2.20.0
webpack: ^5.75.0 => 5.75.0
webpack-cli: ^5.0.1 => 5.0.1

[Jerry-Hong]

webpack-contrib/css-loader#1493

[pcattori]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.

To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

[Jerry-Hong]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.

To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

Sorry I don't understand why it doesn't resolve import references in CSS.

[Jerry-Hong]

@Jerry-Hong this is a known limitation of the current Remix CSS loader. It doesn't try to resolve import references in CSS.
To improve this, the code that handles imports in CSS from css-loader could be copied over into the Remix css loader implementation.

Sorry I don't understand why it doesn't resolve import references in CSS.

I got it. Because this.importModule is running in Node.js environment and the url is called by new URL(url) in Node.js without protocol(http://, https://) will throw error(invalid URL).

The workaround is add protocol and host to publicPath. We can detect the publicPath in remix.config.js is without protocol, and then add the default protocol and host to it. I will create a PR for this issue. 👍

[ScriptedAlchemy]

You can turn off url construction on builds. JavaScript.url.relative or something like that.

[ScriptedAlchemy]

New url shouldn't be used in node envs. So you need to tell webpack not to attempt it