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