[Bug]: Panic occurred at runtime，using @rspack/core@6.0.5

[childrentime]

System Info

System: OS: macOS 14.1 CPU: (8) arm64 Apple M3 Memory: 92.16 MB / 16.00 GB Shell: 5.9 - /bin/zsh Binaries: Node: 18.12.1 - ~/.nvm/versions/node/v18.12.1/bin/node Yarn: 1.22.21 - ~/.nvm/versions/node/v18.12.1/bin/yarn npm: 8.19.2 - ~/.nvm/versions/node/v18.12.1/bin/npm pnpm: 8.15.5 - ~/.nvm/versions/node/v18.12.1/bin/pnpm Watchman: 2024.04.15.00 - /opt/homebrew/bin/watchman Browsers: Chrome: 124.0.6367.119 Edge: 124.0.2478.80 Safari: 17.1

Details

Hello, I am currently developing a streaming rendering framework based on rspack. I noticed that the latest version of rspack supports dynamic entries, so I am trying to use it.

const { EntryOptionPlugin } = require("@rspack/core");
 compiler.hooks.entryOption.tap("EntryOptions", (context, entry) => {
      const newEntry = () => {
        if (!compiler.allEntries) {
          compiler.allEntries = entry
        }
        const baseEntry = Object.entries(entry).reduce(
          (all, [key]) => {
            if (!this.options.pageEntries[key]) {
              // @ts-expect-error
              all[key] = entry[key];
            }
            return all;
          },
          {}
        );

        return {
          ...baseEntry,
          ...Object.keys(compiler.compiledEntries).reduce((all, key) => {
            const config = compiler.compiledEntries[key];
            if (config) {
              all[key] = config;
            }
            return all;
          }, {}),
        };
      };

      // TODO: rspack不支持 dynamic entry
      EntryOptionPlugin.applyEntryOption(compiler, context, newEntry);
      // EntryOptionPlugin.applyEntryOption(compiler, context, entry);
      return true;
    });

When I start running my application, everything works fine when I access the /home route. However, when I then access the /user route, the following error occurs. It's not an issue with a specific route, because the same problem occurs when I first access the /user route and then the /home route.

trace stack:

Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues
Message:  Module(builtin:react-refresh-loader!/Users/zhangyuanqing/works/github/pareto/node_modules/.pnpm/babel-loader@9.1.3_@babel+core@7.24.4_webpack@5.91.0/node_modules/babel-loader/lib/index.js??ruleSet[1].rules[2].use[0]!/Users/zhangyuanqing/works/github/pareto/examples/lazy-route/app/user/recommends/index.tsx) should be added before using
Location: crates/rspack_core/src/chunk_graph/chunk_graph_module.rs:75

Run with COLORBT_SHOW_HIDDEN=1 environment variable to disable frame filtering.
Run with RUST_BACKTRACE=full to include source snippets.
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BACKTRACE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 1: _napi_register_module_v1
    at <unknown source file>
 2: _napi_register_module_v1
    at <unknown source file>
 3: _napi_register_module_v1
    at <unknown source file>
 4: _napi_register_module_v1
    at <unknown source file>
 5: _napi_register_module_v1
    at <unknown source file>
 6: _wasmer_vm_imported_memory32_atomic_notify
    at <unknown source file>
 7: _napi_register_module_v1
    at <unknown source file>
 8: _napi_register_module_v1
    at <unknown source file>
 9: _napi_register_module_v1
    at <unknown source file>
10: _napi_register_module_v1
    at <unknown source file>
11: _napi_register_module_v1
    at <unknown source file>
12: _napi_register_module_v1
    at <unknown source file>
13: _napi_register_module_v1
    at <unknown source file>
14: _napi_register_module_v1
    at <unknown source file>
15: _napi_register_module_v1
    at <unknown source file>
16: _napi_register_module_v1
    at <unknown source file>
17: _napi_register_module_v1
    at <unknown source file>
18: _napi_register_module_v1
    at <unknown source file>
19: _napi_register_module_v1
    at <unknown source file>
20: _napi_register_module_v1
    at <unknown source file>
21: __pthread_joiner_wake
    at <unknown source file>
 ELIFECYCLE  Command failed.

Reproduce link

https://github.com/childrentime/pareto

Reproduce Steps

pnpm i
cd examples/lazy-route
pnpm dev

visit http://localhost:4000/home visit http://localhost:4000/user

[ahabhgk]

@jerrykingxyz This panic seems related to incremental rebuild, after add cache: false it works, use_code_splitting_cache is unexpectedly hit, so there are some new modules didn't add to chunkGraph

[ahabhgk]

@childrentime WebpackDemandEntryPlugin seems can be replaced by lazyCompilation, lazyCompilation can also compile other unused entries lazily, we will release lazyCompilation in v0.7.0 (in this week if all goes well, for now you can try 0.7.0-beta.0-canary-633b9cb-20240520070628)

[childrentime]

@ahabhgk How does lazyCompilation compile the corresponding client entry when accessing the route? I can understand that it can be done on the server side.

[ahabhgk]

https://webpack.js.org/configuration/experiments/#experimentslazycompilation there is lazyCompilation.entries = true do that, if you have entry: { a: "a.js", b: "b.js" }, when you access entry a, the entry b won't compile if you enable this options, but there are some limitations need user to manually handle it

[childrentime]

seems fixed in rspack v0.7.1

[childrentime]

sorry. I accidentally misread it.

[AdamJSoftware]

Issue still occurs in 1.0.0 alpha. Below is my config

const rspack = require("@rspack/core");
const refreshPlugin = require("@rspack/plugin-react-refresh");
const isDev = process.env.NODE_ENV === "development";

const path = require("path");
const deps = require("./package.json").dependencies;
console.log({ deps });
const { ModuleFederationPlugin } = require(
  "@module-federation/enhanced/rspack",
);

const name = "app_02";
const name1 = name + "1";
/**
 * @type {import('@rspack/cli').Configuration}
 */
module.exports = {
  entry: {
    main: "./src/index.tsx",
  },
  resolve: {
    extensions: ["...", ".ts", ".tsx", ".jsx"],
  },

  devtool: "source-map",
  optimization: {
    minimize: false,
  },
  devServer: {
    port: 3000,
    hot: true,
    static: {
      directory: path.join(__dirname, "build"),
    },
    liveReload: false,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization",
    },
  },
  optimization: { minimize: false },
  output: {
    path: __dirname + "/dist",
    uniqueName: name1,
    publicPath: "http://localhost:3000/",
    filename: "[name].js",
  },
  watch: true,
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset",
      },

      {
        test: /\.(jsx?|tsx?)$/,
        exclude: /(node_modules|\.webpack)/,
        use: [
          {
            loader: "builtin:swc-loader",
            options: {
              sourceMap: true,
              jsc: {
                parser: {
                  syntax: "typescript",
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: "automatic",
                    development: isDev,
                    refresh: isDev,
                  },
                },
              },
              env: {
                targets: [
                  "chrome >= 87",
                  "edge >= 88",
                  "firefox >= 78",
                  "safari >= 14",
                ],
              },
            },
          },
        ],
      },
      {
        test: /\.css$/,
        use: [
          // Creates `style` nodes from JS strings
          "style-loader",
          // Translates CSS into CommonJS
          "css-loader",
          // Compiles Sass to CSS
          "sass-loader",
        ],
      },
    ],
  },
  // experiments: {
  //   lazyCompilation: {
  //     entries: true
  //   }
  // },
  plugins: [
    new rspack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
    }),
    new rspack.ProgressPlugin({}),
    isDev && new rspack.HotModuleReplacementPlugin(),

    new rspack.HtmlRspackPlugin({
      template: "./index.html",
      excludedChunks: [name],
      filename: "index.html",
      inject: true,
      publicPath: "/",
    }),
    new ModuleFederationPlugin({
      name: name,
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button.tsx",
      },
      manifest: true,
      dev: {
        disableLiveReload: false,
      },
      // shared: {
      //   ...deps,
      //   "react-router-dom": {
      //     singleton: true,
      //   },
      //   "react-dom": {
      //     singleton: true,
      //   },
      //   react: {
      //     singleton: true,
      //   },
      // },
    }),
    isDev ? new refreshPlugin() : null,
  ].filter(Boolean),
};

Occurs when running rspack server with NODE_ENV set to development. Sometimes, went updating the components, the HMR seems to cause it to crash with the following error:

Panic occurred at runtime. Please file an issue on GitHub with the backtrace belo
w: https://github.com/web-infra-dev/rspack/issues
Message:  Module(builtin:react-refresh-loader!builtin:swc-loader??ruleSet[1].rule
s[3].use[0]!/home/adam/Documents/databending/new-gqlizer/attachamizer-admin-rs/sr
c/Button.tsx) should be added before using
Location: crates/rspack_core/src/chunk_graph/chunk_graph_module.rs:75

[github-actions[bot]]

Hello @childrentime, sorry we can't investigate the problem further without reproduction demo, please provide a repro demo by forking rspack-repro, or provide a minimal GitHub repository by yourself. Issues labeled by need reproduction will be closed if no activities in 14 days.

[jerrykingxyz]

@AdamJSoftware Please provide a repro repo.

[AdamJSoftware]

Not sure what I did but the issue disappeared... If it comes back up again I'll create a repro repo

[github-actions[bot]]

Since the issue was labeled with need reproduction, but no response in 14 days. This issue will be closed. Feel free to comment and reopen it if you have any further questions.