Skip to content

HMR not working when lazy loading Class component wrapped in Hoc #133

@froleo

Description

@froleo

Describe the bug

Trying to migrate an older create-react-app to Vite i ran in to the following issue:

When a Class component is lazy loaded using React.lazy and the component is wrapped in a Hoc then HMR stops working.
The browser has to be refreshed manually to show changes.

When React.lazy is removed HMR works.
Also when using @loadable/component instead of React.lazy HMR works.

CleanShot.2023-04-04.at.09.56.35.mp4

See minimal reproduction in codesandbox below:

Reproduction

https://codesandbox.io/p/sandbox/elated-dawn-tvd36y?file=%2Fsrc%2FApp.tsx

Steps to reproduce

  • Open codesandbox
  • Edit the file ClassComponentWithHoc.tsx
  • Save the changes

Result: The browser will not update the output unless you manually click the refresh button of the browser window.

System Info

System:
    OS: Linux 5.15 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
    CPU: (2) x64 AMD EPYC
    Memory: 409.07 MB / 1.63 GB
    Container: Yes
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 18.15.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.0 - /usr/local/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^3.1.0 => 3.1.0 
    vite: ^4.1.1 => 4.2.1

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