HMR does not work with lazily-loaded class-based components, react-router and redux

[printfn]

Describe the bug

Hi, I'm having issues with HMR not reloading certain modules.

The issue seems to only occur when using react-router, react-redux and a lazily-loaded class-based component.

In the attached minimal reproduction, editing the "src/components/LazyClassComponent.tsx" file (route: "/d") triggers a hot module reload but does not update the page, requiring a hard refresh.

I'm using Firefox 116.0.2 on Windows, running Vite in WSL.

Reproduction

https://github.com/printfn/vite-hmr-test

Steps to reproduce

Run npm install followed by npm run dev. Open the page in the browser and navigate to the '/d' link. Edit the "src/components/LazyClassComponent.tsx" file. In the browser console it will say [vite] hot updated: /src/Router.tsx, but the page content does not actually update. If you try the same thing on any of the other three routes, it will update as expected.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.2 LTS 22.04.2 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 7600X 6-Core Processor
    Memory: 28.25 GB / 30.91 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 20.5.0 - /usr/bin/node
    Yarn: 3.6.1 - /usr/bin/yarn
    npm: 9.8.0 - /usr/bin/npm
    pnpm: 8.6.11 - /usr/bin/pnpm
  npmPackages:
    @vitejs/plugin-react-swc: ^3.3.2 => 3.3.2
    vite: ^4.4.5 => 4.4.9

Used Package Manager

npm

Logs

No response

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
• The provided reproduction is a minimal reproducible example of the bug.

[ArnaudBarre]

Thanks for the repro. I will check it out later but probably something similar to vitejs/vite-plugin-react#133

[printfn]

Thanks! I’ve checked, the “fixHMR” component from that thread also works around this bug.