webpack/css-loader

Invalid URL when css use background image

Closed this issue · 3 comments

Jerry-Hong commented

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

alexander-akait commented

Because importModule run code on Node.js side (in remix-loader), so you got such problem, we can't solve it here, sorry, you can look at mini-css-extract-plugin logic (we do the same logic)

  • 👍1
alexander-akait commented

Als you can try to set:

{
            loader: 'css-loader',
            options: { modules: true, url: false },
          },

But urls will not be resolved (but no errors)

Jerry-Hong commented

Because importModule run code on Node.js side (in remix-loader), so you got such problem, we can't solve it here, sorry, you can look at mini-css-extract-plugin logic (we do the same logic)

I got it. Thanks a lot.