[plugin-react-refresh] auto page reloading is broken when a jsx file contain multi-components

[kljzndx]

Describe the bug

For details. Please view the video

Reproduction

https://github.com/kljzndx/Test-Demos/tree/vite-react-bug

System Info

System:
    OS: Linux 5.10 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (4) arm64 unknown
    Memory: 1.52 GB / 3.71 GB
    Container: Yes
    Shell: 5.7.1 - /usr/bin/zsh
  Binaries:
    Node: 14.16.0 - /usr/local/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.23.0 - /usr/local/bin/npm
  Browsers:
    Chromium: 89.0.4389.114 # Raspberry pi
    Edge: 93.0.961.47 # local PC

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.
• The provided reproduction is a minimal reproducible example of the bug.

[IanVS]

React fast refresh does not work with class components, only functional components. There's an issue vitejs/vite-plugin-react#8 open to include class components.

[kljzndx]

好吧，看来是我误解了。但是为什么文档里面只字未提这件事？
--------------Google Translate------------
Well, it seems I misunderstood. But why is it not mentioned in the document?

[JonathanSoszka]

I was having the same issue using functional style components. I was able to fix this by not using export default

Chainging this code

export default function() {
  return (
    <div className={"grid"}>
      <div className={"col-12"}>
        <ProfileHeader/>
      </div>
      <div className={"col-12 lg:col-6"}>
        <ProfileInfoCard/>
      </div>
      <div className={"col-12 lg:col-6"}>
        <ProfileGamesCard/>
      </div>
    </div>
  );
}


function ProfileInfoCard() {
  return (
    <Card title={"Info"}></Card>
  )
}


function ProfileGamesCard() {
  return (
    <Card title={"Games"}></Card>
  )
}

To This, fixed it for me

export function Profile() {
  return (
    <div className={"grid"}>
      <div className={"col-12"}>
        <ProfileHeader/>
      </div>
      <div className={"col-12 lg:col-6"}>
        <ProfileInfoCard/>
      </div>
      <div className={"col-12 lg:col-6"}>
        <ProfileGamesCard/>
      </div>
    </div>
  );
}


function ProfileInfoCard() {
  return (
    <Card title={"Info"}></Card>
  )
}


function ProfileGamesCard() {
  return (
    <Card title={"Games"}></Card>
  )
}

[sapphi-red]

I confirmed this still does not work. (Vite 4.0.2 + plugin-react 3.0.0)
https://stackblitz.com/edit/github-vnvsys?file=src%2FTest2%20-%20component.jsx

HMR not happening is expected due to the limitation of react refresh, but the full reload should happen.

[Carseason]

@sapphi-red me to

[ArnaudBarre]

This issue will be fixed by #79. Waiting for Vite 4.1 to enable this change