[Bug]: Build hangs when using rspack.CssExtractRspackPlugin.loader with builtin:swc-loader set to env.mode: usage

Thiry1 commented 3 weeks ago

System Info

System: OS: macOS 14.7 CPU: (8) arm64 Apple M2 Memory: 52.23 MB / 24.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 20.17.0 - ~/.nodebrew/current/bin/node Yarn: 1.22.19 - /opt/homebrew/bin/yarn npm: 10.8.2 - ~/.nodebrew/current/bin/npm pnpm: 8.15.3 - ~/.nodebrew/current/bin/pnpm bun: 1.0.2 - /opt/homebrew/bin/bun Browsers: Chrome: 130.0.6723.70 Edge: 130.0.2849.56 Safari: 18.0 npmPackages: @rspack/cli: ^1.0.14 => 1.0.14 @rspack/core: ^1.0.14 => 1.0.14

Details

Build hangs when using rspack.CssExtractRspackPlugin.loader with builtin:swc-loader set to env.mode: usage. The build succeeds when env.mode is set to entry.

{
  mode: "development",
  entry: "./src/index.js",
  output: {
    path: "./dist",
  },
  module: {
    rules :[
      {
        test: /\.css$/,
        use: [
          {
            loader: rspack.CssExtractRspackPlugin.loader,
          },
          {
            loader: "css-loader",
          },
        ],
      },
      {
        test: /\.js$/,
        use: {
          loader: "builtin:swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "ecmascript",
              },
            },
            env: {
              mode: process.env.ENV_MODE, // "entry" or "usage"
              coreJs: require("core-js/package.json").version,
              targets: ["IE 11"],
            },
          },
        },
        type: "javascript/auto"
      },
    ],
  },
  experiments: {
    css: false
  },
  plugins: [
    new rspack.CssExtractRspackPlugin({
      filename: `[name].[chunkhash:10].css`,
    }),
  ],
}

Reproduce link

https://github.com/Thiry1/rspack-bug-repro/commit/ae6055b36cf62e19861a32023a1d663cbfe37f36

Reproduce Steps

clone repro repo
git switch swc-mode
npm i
npm run build:mode:usage

JSerFeng commented 3 weeks ago

I'm fixing it, during this time, you can ignore javascript in core-js package to escape this issue

JSerFeng commented 3 weeks ago

The real reason is that when you compile a module with env.mode: usage, swc will insert import statement of core-js automatically in that module.

But it will insert core-js in core-js module itself as well, there are many cycle dependencies during your build.

But importModule has no such detection at this time, so it hangs. I'll add some warning when encountering cycle here, the final solution for your case is ignoring core-js modules by swc

Thiry1 commented 3 weeks ago

@JSerFeng Thank you for investigating this issue. I have confirmed that adding exclude: [/core-js/] prevents the build from hanging.

However, when env.mode is set to usage, the following error occurs, causing the build to fail:

ERROR in ./src/style.css
  × Module build failed:
  ╰─▶   × Error: HookWebpackError: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/sourceMaps.js
        │     at tryRunOrWebpackError (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:8138:11)
        │     at __webpack_require__ (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:17601:13)
        │     at Module.<anonymous> (/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/cjs.js!/Users/***/workspace/rspack-bug-repro/src/style.css:6:104)
        │     at Object.fn (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:8033:17)
        │     at SyncHook.callAsyncStageRange (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
        │     at SyncHook.callStageRange (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
        │     at QueriedHook.call (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
        │     at /Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:17602:29
        │     at tryRunOrWebpackError (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:8133:9)
        │     at __webpack_require__ (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:17601:13)
        │ -- inner error --
        │ Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/sourceMaps.js
        │     at Object.set [as exports] (RuntimeSpec { inner: {"build time"}, key: "build time" }/webpack/runtime/esm_module_decorator:8:19)
        │     at Module.<anonymous> (builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/sourceMaps.js:26:16)
        │     at Object.fn (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:8033:17)
        │     at SyncHook.callAsyncStageRange (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:240:21)
        │     at SyncHook.callStageRange (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:259:14)
        │     at QueriedHook.call (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/lite-tapable/dist/index.js:218:26)
        │     at /Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:17602:29
        │     at tryRunOrWebpackError (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:8133:9)
        │     at __webpack_require__ (/Users/***/workspace/rspack-bug-repro/node_modules/@rspack/core/dist/index.js:17601:13)
        │     at Module.<anonymous> (/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/cjs.js!/Users/***/workspace/rspack-bug-repro/src/style.css:6:104)
        │
        │ Generated code for builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/sourceMaps.js
        │  1 | __webpack_require__.r(__webpack_exports__);
        │  2 | /* ESM import */var core_js_modules_web_btoa_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/web.btoa.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/web.btoa.js");
        │  3 | /* ESM import */var core_js_modules_web_btoa_js__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_btoa_js__WEBPACK_IMPORTED_MODULE_0__);
        │  4 | /* ESM import */var core_js_modules_web_dom_exception_constructor_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! core-js/modules/web.dom-exception.constructor.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/web.dom-exception.constructor.js");
        │  5 | /* ESM import */var core_js_modules_web_dom_exception_constructor_js__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_exception_constructor_js__WEBPACK_IMPORTED_MODULE_1__);
        │  6 | /* ESM import */var core_js_modules_web_dom_exception_stack_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! core-js/modules/web.dom-exception.stack.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/web.dom-exception.stack.js");
        │  7 | /* ESM import */var core_js_modules_web_dom_exception_stack_js__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_exception_stack_js__WEBPACK_IMPORTED_MODULE_2__);
        │  8 | /* ESM import */var core_js_modules_web_dom_exception_to_string_tag_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! core-js/modules/web.dom-exception.to-string-tag.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/web.dom-exception.to-string-tag.js");
        │  9 | /* ESM import */var core_js_modules_web_dom_exception_to_string_tag_js__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_web_dom_exception_to_string_tag_js__WEBPACK_IMPORTED_MODULE_3__);
        │ 10 | /* ESM import */var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! core-js/modules/es.json.stringify.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/es.json.stringify.js");
        │ 11 | /* ESM import */var core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_json_stringify_js__WEBPACK_IMPORTED_MODULE_4__);
        │ 12 | /* ESM import */var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! core-js/modules/es.array.concat.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/es.array.concat.js");
        │ 13 | /* ESM import */var core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_concat_js__WEBPACK_IMPORTED_MODULE_5__);
        │ 14 | /* ESM import */var core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! core-js/modules/es.array.join.js */ "javascript/dynamic|/Users/***/workspace/rspack-bug-repro/node_modules/core-js/modules/es.array.join.js");
        │ 15 | /* ESM import */var core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es_array_join_js__WEBPACK_IMPORTED_MODULE_6__);
        │ 16 | /* module decorator */ module = __webpack_require__.hmd(module);
        │ 17 |
        │ 18 |
        │ 19 |
        │ 20 |
        │ 21 |
        │ 22 |
        │ 23 |
        │ 24 |
        │ 25 | module.exports = function(item) {
        │ 26 |     var content = item[1];
        │ 27 |     var cssMapping = item[3];
        │ 28 |     if (!cssMapping) {
        │ 29 |         return content;
        │ 30 |     }
        │ 31 |     if (typeof btoa === "function") {
        │ 32 |         var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(cssMapping))));
        │ 33 |         var data = "sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(base64);
        │ 34 |         var sourceMapping = "/*# ".concat(data, " */");
        │ 35 |         return [
        │ 36 |             content
        │ 37 |         ].concat([
        │ 38 |             sourceMapping
        │ 39 |         ]).join("\n");
        │ 40 |     }
        │ 41 |     return [
        │ 42 |         content
        │ 43 |     ].join("\n");
        │ 44 | };
        │ 45 |
        │
        │ Generated code for /Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/cjs.js!/Users/***/workspace/rspack-bug-repro/src/style.css
        │  1 | __webpack_require__.r(__webpack_exports__);
        │  2 | __webpack_require__.d(__webpack_exports__, {
        │  3 |   "default": function() { return __WEBPACK_DEFAULT_EXPORT__; }
        │  4 | });
        │  5 | /* ESM import */var _node_modules_css_loader_dist_runtime_sourceMaps_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/sourceMaps.js */ "builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/sourceMaps.js");
        │  6 | /* ESM import */var _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../node_modules/css-loader/dist/runtime/api.js */ "builtin:swc-loader??ruleSet[1].rules[1].use[0]!/Users/***/workspace/rspack-bug-repro/node_modules/css-loader/dist/runtime/api.js");
        │  7 | // Imports
        │  8 |
        │  9 |
        │ 10 | var ___CSS_LOADER_EXPORT___ = (0,_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"]);
        │ 11 | // Module
        │ 12 | ___CSS_LOADER_EXPORT___.push([module.id, `.my-class {
        │ 13 |   color: red;
        │ 14 | }`, "",{"version":3,"sources":["webpack://./src/style.css"],"names":[],"mappings":"AAAA;EACE,UAAU;AACZ","sourcesContent":[".my-class {\n  color: red;\n}"],"sourceRoot":""}]);
        │ 15 | // Exports
        │ 16 | /* ESM default export */ const __WEBPACK_DEFAULT_EXPORT__ = (___CSS_LOADER_EXPORT___);
        │ 17 |
        │
        │

Rspack compiled with 1 error in 151 ms

When env.mode is set to entry, the build succeeds, but the following warning is output:

WARNING in ./src/index.js
  ⚠ ESModulesLinkingWarning: export 'default' (imported as 'classNames') was not found in './style.css' (module has no exports)
   ╭─[2:12]
 1 │ import classNames from "./style.css";
 2 │ console.log(classNames);
   ·             ──────────
 3 │ new URL("https://google.com");

When I ran the generated JavaScript, classNames was undefined. Depending on the method used to import CSS, an empty object may also be returned.

import classNames from "./style.css"; // classNames is undefined
import * as classNames from "./style.css"; // className is Object [Module] {}
const classNames = require("./style.css"); // classNames is Object [Module] {}

Should I create a separate issue for this?

Here's repro code: https://github.com/Thiry1/rspack-bug-repro/compare/main...6ccd37d8de65ccf422867d70ff0e90d84814c92d

Thiry1 commented 3 weeks ago

I've found that we can avoid the issue by setting isModule to "unknown".

{
  loader: "builtin:swc-loader",
  options: {
+    isModule: "unknown",
  }
}

JSerFeng commented 3 weeks ago

I've found that we can avoid the issue by setting isModule to "unknown".

Yeah, should keep module's format as is

web-infra-dev / rspack