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
antd
in 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
make
speed 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.tsx
when HMR. We can still findDemo.tsx
in 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.tsx
is 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")
这个报错。