rspack: [Bug Report]: webpack-dev-middleware "panicked at 'Module should be added before'"
System Info
System:
OS: macOS 12.6
CPU: (8) arm64 Apple M1 Pro
Memory: 104.73 MB / 16.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node
Yarn: 1.22.19 - /opt/homebrew/bin/yarn
npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm
Browsers:
Chrome: 111.0.5563.146
Firefox: 104.0.2
Safari: 16.0
npmPackages:
@rspack/cli: latest => 0.1.4
Details
I get the following error during development by just removing a import declaration(which imports a simple demo component copied from ant design docs).

Rspack ████░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░ 10% building ./App <e> [webpack-dev-middleware] [Error: error[internal]: Module should be added before.
<e> Raw: panicked at 'Module should be added before', /Users/runner/work/rspack/rspack/crates/rspack_core/src/chunk_graph.rs:163:8
<e> This is not expected, please file an issue at https://github.com/web-infra-dev/rspack/issues.
<e>
<e> 0: _napi_register_module_v1
<e> 1: <unknown>
<e> 2: _napi_register_module_v1
<e> 3: _napi_register_module_v1
<e> 4: _napi_register_module_v1
<e> 5: _napi_register_module_v1
<e> 6: _napi_register_module_v1
<e> 7: _napi_register_module_v1
<e> 8: _napi_register_module_v1
<e> 9: _napi_register_module_v1
<e> 10: <unknown>
<e> 11: <unknown>
<e> 12: <unknown>
<e> 13: <unknown>
<e> 14: <unknown>
<e> 15: <unknown>
<e> 16: <unknown>
<e> 17: <unknown>
<e> 18: <unknown>
<e> 19: <unknown>
<e> 20: <unknown>
<e> 21: <unknown>
<e> 22: <unknown>
<e> 23: _napi_register_module_v1
<e> 24: _napi_register_module_v1
<e> 25: _napi_register_module_v1
<e> 26: _napi_register_module_v1
<e> 27: <unknown>
<e> 28: <unknown>
<e> 29: <unknown>
<e> 30: _napi_register_module_v1
<e> 31: _napi_register_module_v1
<e> 32: _napi_register_module_v1
<e> 33: _napi_register_module_v1
<e> 34: __pthread_deallocate
<e>
<e> ] {
<e> code: 'GenericFailure'
<e> }
Reproduce link
https://github.com/AngusFu/rspack-issue-reproduction
Reproduce Steps
- Initialize the project:
npm create rspack@latest && cd rspack-project && npm i - Install
antdin the project:npm i antd - Create
src/Demo.tsx, and paste some snippet from ant-design official site, for example
import React from "react";
import Button from "antd/es/button";
import Space from "antd/es/space";
const Demo: React.FC = () => (
<Space wrap>
<Button type="primary">Primary Button</Button>
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
<Button type="link">Link Button</Button>
</Space>
);
export default Demo;
- Add
import Demo from './Demo'insrc/App.js - Run
npm run dev - Remove the import declaration added in STEP 4
- Oooooooops!
About this issue
- Original URL
- State: closed
- Created a year ago
- Comments: 16
Thanks for your investigation, the clean_queue cannot remove circularly dependent modules is expected behavior. The reason is
makespeed when users reuse themSo there are two ways to fix them:
hmr.rs(we can also delete clean_queue)I think the first one is more suitable, @hardfist @h-a-n-a cc
Due to circular dependencies, current clean_queue tasks would not clear
Demo.tsxwhen HMR. We can still findDemo.tsxin module_graph even though the import declaration is removed.Then in the seal process (
self.compilation.seal(self.plugin_driver.clone()).await?;), new compilation’s chunk_graph is mutated. Since the import ofDemo.tsxis removed, the chunk turns toNone.When calling
collect_changed_modules()with new compilation,.expect("should has module id")would fail.因循环依赖的存在,HMR 时 clean_queue 操作后,
Demo.tsx仍会保留在 module_graph 中(尽管我们注释掉了 import 语句)。接下来是
seal操作(self.compilation.seal(self.plugin_driver.clone()).await?;),new compilation’s 的 chunk_graph 发生了变更(更准确的说法是,seal 前 chunk_graph 是空的,seal 后就没了Demo.tsx的部分)。所以,
hmr.rs中第二次调用collect_changed_modules()时,会触发.expect("should has module id")这个报错。