Skip to content

[Bug]: Panic occurred at runtime and LimitChunkCountPlugin bug #11232

@monjer

Description

@monjer

System Info

System:

  • OS: macOS 14.1.2
  • CPU: (8) arm64 Apple M1
  • Memory: 100.31 MB / 16.00 GB
  • Shell: 5.9 - /bin/zsh

Binaries:

  • Node: 20.16.0 - ~/.nvm/versions/node/v20.16.0/bin/node
  • npm: 10.8.1 - ~/.nvm/versions/node/v20.16.0/bin/npm
  • pnpm: 9.11.0 - ~/.nvm/versions/node/v20.16.0/bin/pnpm

Browsers:

  • Chrome: 138.0.7204.169
  • Safari: 17.1.2

npmPackages:

  • @rspack/cli: ^1.4.10 => 1.4.10
  • @rspack/core: ^1.4.10 => 1.4.10
  • @rspack/plugin-react-refresh: ^1.4.3 => 1.4.3

Details

Use code splitting and set new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1, }) in dev mode at the same time, when start the project , during the building process , and save any file , the rspack will exist with the error:

Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues: panicked at crates/rspack_core/src/lib.rs:342:26:
Chunk(ChunkUkey(Ukey(2), PhantomData<rspack_core::chunk::Chunk>)) not found in ChunkByUkey

Reproduce link

No response

Reproduce Steps

  1. use rspack-cli create a new react project npx create-rspack --dir my-project --template react
  2. install @loadable/component package , npm i @loadable/component
  3. cretae pages folder and some test file and the folder structure like this
src/pages/Page1.jsx
src/pages/Page2.jsx
src/pages/Page3.jsx
  1. edit the code of file src/App.jsx like this
import { useState } from "react";
import loadable from '@loadable/component';
import "./App.css";

const fallback = {
  fallback: <div style={{ paddingTop: 16 }}></div>,
};

const Page1 = loadable(() => import(/* webpackChunkName:"Page1", webpackPrefetch:true */ 'src/pages/Page1'), fallback);
const Page2 = loadable(() => import(/* webpackChunkName:"Page2", webpackPrefetch:true */ 'src/pages/Page2'), fallback);
const Page3 = loadable(() => import(/* webpackChunkName:"Page3", webpackPrefetch:true */ 'src/pages/Page3'), fallback);
function App() {
  const [count, setCount] = useState(0);

  return (
    <div className="App">
      <Page1 />
      <Page2 />
      <Page3 />
    </div>
  );
}

export default App;
  1. Add the new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1}) plugin config , the final rspack.config.mjs may like this
import { dirname } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "@rspack/cli";
import { rspack } from "@rspack/core";
import { ReactRefreshRspackPlugin } from "@rspack/plugin-react-refresh";
import path from "path";
const __dirname = dirname(fileURLToPath(import.meta.url));
const isDev = process.env.NODE_ENV === "development";

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ["last 2 versions", "> 0.2%", "not dead", "Firefox ESR"];

export default defineConfig({
  context: __dirname,
  entry: {
    main: "./src/main.jsx"
  },
  resolve: {
    extensions: ["...", ".ts", ".tsx", ".jsx"],
    alias: {
      src: path.resolve(process.cwd(), 'src'),
    }
  },
  module: {
    rules: [
      {
        test: /\.svg$/,
        type: "asset"
      },
      {
        test: /\.(jsx?|tsx?)$/,
        use: [
          {
            loader: "builtin:swc-loader",
            options: {
              jsc: {
                parser: {
                  syntax: "typescript",
                  tsx: true
                },
                transform: {
                  react: {
                    runtime: "automatic",
                    development: isDev,
                    refresh: isDev
                  }
                }
              },
              env: { targets }
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new rspack.HtmlRspackPlugin({
      template: "./index.html"
    }),
    new rspack.optimize.LimitChunkCountPlugin({ maxChunks: 1, }),
    isDev ? new ReactRefreshRspackPlugin() : null
  ].filter(Boolean),
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets }
      })
    ]
  },
  experiments: {
    css: true
  }
});
  1. run the project with npm run dev
  2. during the building process , edit any Pagex.js file content and save it quickly , rspack cli will exit with error message like this :
Panic occurred at runtime. Please file an issue on GitHub with the backtrace below: https://github.com/web-infra-dev/rspack/issues: panicked at crates/rspack_core/src/lib.rs:342:26:
Chunk(ChunkUkey(Ukey(2), PhantomData<rspack_core::chunk::Chunk>)) not found in ChunkByUkey

The key point is the maxChunks value , when set 1 , the error will occur, and remove it or set a bigger number , the error gone.

Image

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions