Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Invalid URL when css use background image #1493

Closed
Jerry-Hong opened this issue Jan 12, 2023 · 3 comments
Closed

Invalid URL when css use background image #1493

Jerry-Hong opened this issue Jan 12, 2023 · 3 comments

Comments

@Jerry-Hong
Copy link

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
Copy link
Member

alexander-akait commented Jan 13, 2023

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)

@alexander-akait
Copy link
Member

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants