Skip to content

[Bug]: import.meta.webpackHot.accept not called when class changes #4730

@dartess

Description

@dartess

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.1

Details

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

  1. npm i
  2. npm run dev:rsbuild
  3. open http://localhost:3000/
  4. change value in src/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

added theissue type on Mar 7, 2025
GRAMMAC1

GRAMMAC1 commented on Mar 10, 2025

@GRAMMAC1
Contributor

It seems that Rsbuild cannot detect file changes when only exporting one class. Adding an additional export can temporarily solve this problem.

For example

export const VERSION = 1;
export class Features {
  public value = "123";
  public version = VERSION;
}

It works 😁

GRAMMAC1

GRAMMAC1 commented on Mar 10, 2025

@GRAMMAC1
Contributor

disable fastRefresh of Rsbuild React Plugin then HMR works fine.

GRAMMAC1

GRAMMAC1 commented on Mar 11, 2025

@GRAMMAC1
Contributor

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

chenjiahan commented on Mar 12, 2025

@chenjiahan
Member

@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

GRAMMAC1 commented on Jun 12, 2025

@GRAMMAC1
Contributor

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, bump React Refresh to latest can resolve this problem.

chenjiahan

chenjiahan commented on Jun 12, 2025

@chenjiahan
Member

Awesome! 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

Projects

No projects

Milestone

No milestone

Relationships

None yet

    Development

    No branches or pull requests

      Participants

      @chenjiahan@dartess@GRAMMAC1@9aoy

      Issue actions

        [Bug]: `import.meta.webpackHot.accept` not called when `class` changes · Issue #4730 · web-infra-dev/rsbuild