Skip to content

HMR freezes browser when using react-router #116

Closed
@caghand

Description

@caghand

Describe the bug

If I change the contents of a functional component that's wrapped in react-router's withRouter(), or if I change any of the children of that component, then HMR kicks in, but the browser hangs, eventually resulting in out-of-memory.

This issue started happening in version 3.1.0. It also started happening in @vitejs/plugin-react-swc in the same version.

Others have encountered the same issue, but with a different router:
TanStack/router#532
TanStack/router#510

Reproduction

https://stackblitz.com/edit/vitejs-vite-jvmb7t?file=src/App.jsx

Steps to reproduce

Install the following dependencies:

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "vite": "^4.1.4"
  }

Configure "@vitejs/plugin-react" in vite.config.js.
Wrap a functional component in withRouter().
Launch the dev server and change the contents of the functional component.
Browser will hang, eventually resulting in out-of-memory.

System Info

System:
    OS: Windows 10 10.0.22000
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 36.89 GB / 63.95 GB
  Binaries:
    Node: 14.21.3 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.21.1 - D:\<path_to_project>\node_modules\.bin\yarn.CMD
    npm: 6.14.18 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (110.0.1587.63)
    Internet Explorer: 11.0.22000.120
  npmPackages:
    @vitejs/plugin-basic-ssl: ^1.0.1 => 1.0.1
    @vitejs/plugin-react: 3.1.0 => 3.1.0
    vite: ^4.1.4 => 4.1.4

Used Package Manager

npm

Logs

No response

Validations

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions