plugin-react-refresh does not work

[wyhaya]

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

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

[adamlindqvist]

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

[y1d7ng]

Don't use unnamed component.
try

const App = () => {
  return <div>123</div>
}

export default App

[lxsmnsyc]

@OneNail I have a similar problem and I tried both the App as variable and as a default function. There's no React Refresh script injected on each of the components.

[hyf0]

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

[lxsmnsyc]

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