Repository navigation
[Bug]: import.meta.webpackHot.accept not called when class changes #4730
Description
Version
System:
OS: macOS 15.3.1
CPU: (10) arm64 Apple M1 Pro
Memory: 3.04 GB / 32.00 GB
Shell: 5.9 - /bin/zsh
Browsers:
Brave Browser: 134.1.76.73
Chrome: 134.0.6998.44
Chrome Canary: 136.0.7054.0
Edge: 111.0.1661.54
Safari: 18.3
Safari Technology Preview: 18.4
npmPackages:
@rsbuild/core: ^1.2.15 => 1.2.15
@rsbuild/plugin-react: ^1.1.1 => 1.1.1Details
I want to listen for changes in a file using "import.meta.webpackHot.accept" and react to the changes.
However, when changing in the class code, nothing happens, as if the file does not change.
note "a": there is a workaround to make the system react to changes. for this it is enough to export an empty function next to the class. now I have to place such a hack in each file with a class.
note "b": I tried to reproduce the problem with rspack and it doesn't seem to reproduce the problem.
Reproduce link
https://github.com/dartess/rsbuild-class-hmr
Reproduce Steps
npm inpm run dev:rsbuild- open http://localhost:3000/
- change
valueinsrc/Features.ts
expected result:console.log:changed!
actual result: nothing.
for note "a": uncomment // export function hmrHack() {} and try again — everything works fine with this workaround.
Activity
GRAMMAC1 commentedon Mar 10, 2025
It seems that Rsbuild cannot detect file changes when only exporting one class. Adding an additional export can temporarily solve this problem.
For example
It works 😁
GRAMMAC1 commentedon Mar 10, 2025
disable fastRefresh of Rsbuild React Plugin then HMR works fine.
GRAMMAC1 commentedon Mar 11, 2025
In test case disable fast refresh HMR still works, the file is in
https://github.com/web-infra-dev/rsbuild/blob/main/e2e/cases/react/disable-fast-refresh/rsbuild.config.ts
so its just a normal behavior rather than a bug in this case? @chenjiahan
chenjiahan commentedon Mar 12, 2025
@GRAMMAC1 Fast Refresh is designed for React component HMR. If Fast Refresh is disabled, HMR will still work, but will not be able to preserve the state of the React component.
For this issue, I think it should work whether React Refresh is enabled or disabled..
GRAMMAC1 commentedon Jun 12, 2025
With React Refresh
class Foo { value = 'foo'}will be treated as React Component. Therefore HMR is blocked by React Refresh. I've submitted PR in React Repo to address this issue. If PR gets merged, bumpReact Refreshto latest can resolve this problem.chenjiahan commentedon Jun 12, 2025
Awesome! 👍