Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

HMR freezes browser when using react-router #116

Closed
7 tasks done
caghand opened this issue Mar 9, 2023 · 4 comments
Closed
7 tasks done

HMR freezes browser when using react-router #116

caghand opened this issue Mar 9, 2023 · 4 comments

Comments

@caghand
Copy link

caghand commented Mar 9, 2023

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

@ArnaudBarre
Copy link
Member

The issue is that you creating a component with a lower case and then re-exporting as an upper case so that the plugin things everything is fine but Babel did not apply fast refresh to the wrapper.

Change your code to export const AppWithRouter = withRouter(App); and update the import in main.jsx (I don't think there is any benefice to hide the wrapper with shadow name export)

@caghand
Copy link
Author

caghand commented Mar 11, 2023

Thanks @ArnaudBarre! Sorry about the misleading issue title. I had no idea that the root cause was my capitalization.
The problem is, I have hundreds of these re-export instances in my codebase. It will be very tedious to fix them all, and in fact, I don't think I can prevent other developers in my team from creating similar re-exports in the future.
Are there any other solutions you can think of? I am even OK with using a hacky patch-package for @vitejs/plugin-react.

@ArnaudBarre
Copy link
Member

ArnaudBarre commented Mar 11, 2023

Ok found the culprit. This is due to the shadow rename (I still think this is a bad practice because it can confuse grep search and humans too). It will be fixed in the next release (see latest commit on main).

In the meantime you can apply the patch by changing line 19 of node_modules/@vitejs/plugin-react/dist/refreshUtils.js to exports.register(exportValue, filename + ' export ' + key).

Edit: After investigation, this fix is safe.

@caghand
Copy link
Author

caghand commented Mar 11, 2023

Thanks @ArnaudBarre! That patch works perfectly! My team will really appreciate this.
And I've seen that you've applied the same patch to @vitejs/plugin-react-swc. Thank you for that!

@github-actions github-actions bot locked and limited conversation to collaborators Mar 26, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

2 participants