Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

plugin-react-refresh does not work

See original GitHub issue

Describe the bug

I found when using plugin-react-refresh that I had to add an unrelated component for the hot update to work, see the video

https://user-images.githubusercontent.com/23690145/124550539-673b4c00-de63-11eb-86fd-a4d9522119f9.mov

Reproduction

vite-test.zip

System Info

System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
    Memory: 4.82 GB / 16.00 GB
    Shell: 3.3.0 - /opt/homebrew/bin/fish
  Binaries:
    Node: 16.4.1 - /opt/homebrew/bin/node
    Yarn: 1.22.10 - /opt/homebrew/bin/yarn
    npm: 7.18.1 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1

Used Package Manager

yarn

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. For example, if it’s a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/vue-next instead.
Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.

Issue Analytics

State:
Created 2 years ago
Reactions:7
Comments:5 (1 by maintainers)

Top GitHub Comments

3reactions

adamlindqvistcommented, Jul 6, 2021

Maybe not much of help but just want to add that I’m experiencing similar issues on my end after updating from 1.3.8 to 1.4.1. However I have problem isolating the problem in a minimal repo.

My issue is that it performs a hard reload every time I edit a file that’s within a sub-folder to src/ e.g. src/components/Button.tsx or src/pages/StartPage.tsx

1reaction

lxsmnsyccommented, Aug 14, 2021

It’s not a bug of vite. see #4298 (comment)

would it be better if I can reproduce the bug with named components?

Edit:

nvm, looks like it got fixed between 2.3.7 and 2.4.4

Top Results From Across the Web

react-refresh-webpack-plugin/TROUBLESHOOTING.md at main

A Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components. - react-refresh-webpack-plugin/TROUBLESHOOTING.md ...

Webpack5 + react-refresh-webpack-plugin does not work

I have been trying to setup fast refreshing and hot reloading in react with `webpack5 following the documentation for react-refresh-webpack- ...

@vitejs/plugin-react-refresh - npm

Start using @vitejs/plugin-react-refresh in your project by running `npm i @vitejs/plugin-react-refresh`. There are 46 other projects in the ...

Integrating with Other Libraries - React

The easiest way to avoid conflicts is to prevent the React component from updating. You can do this by rendering elements that React...

@vitejs/plugin-react-refresh - npm package | Snyk

The npm package @vitejs/plugin-react-refresh was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as ......