Skip to content
This repository was archived by the owner on Jul 24, 2025. It is now read-only.
This repository was archived by the owner on Jul 24, 2025. It is now read-only.

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

@printfn

Description

@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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions