React Fast Refresh (HMR) not working with styled components in certain conditions

[robertmusil]

Describe the bug

When using styled components (@emotion/styled in my case) if the file contains any other react-like-components (detected by isComponentLikeIdentifier) and doesn't contain any other non-react-like exports, then changes to those styled components are not properly refreshed by HMR.

All the react-like-components are being refreshed by $RefreshReg$ and the file is accepted, but styled components in that case are not caught in the refresh.

If, however, there are other non-component-like exports or there aren't any other component-like identifiers then the file is not accepted and refreshes properly by its parent(s) being HMR'd

Reproduction

https://codesandbox.io/s/vite-emotion-hmr-bug-rkk0hi?file=/src/HmrTest.tsx

Steps to reproduce

Steps to reproduce described in comments in minimal reproduction

System Info

sandbox@sse-sandbox-rkk0hi:/sandbox$ npx envinfo --system --npmPackages '{vite,@vitejs/*}' --binaries --browsers
npx: installed 1 in 0.915s

  System:
    OS: Linux 5.4 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 8.26 GB / 62.72 GB
    Container: Yes
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.19.3 - ~/.nvm/versions/node/v14.19.3/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v14.19.3/bin/yarn
    npm: 6.14.17 - ~/.nvm/versions/node/v14.19.3/bin/npm
  npmPackages:
    @vitejs/plugin-react: ^2.1.0 => 2.2.0
    @vitejs/plugin-react-refresh: ^1.3.1 => 1.3.3
    vite: ^3.1.0 => 3.2.4

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 vuejs/core 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.

[PengBoUESTC]

U can use like this to avoid this problem
export default () => <Alert></Alert>

I think react-refresh doesn't register component correctly

project create by npx create-react-app my-app , but HMR in this project is ok ..
__webpack_require__.$Refresh$.register(_c, "Asd");

your project
$RefreshReg$(_c, "Asd");

[robertmusil]

@PengBoUESTC usually I'd export several styled components from one file, I guess that's a pretty standard thing to do too, so using defaults doesn't solve it.

And you're right, it works out of the box in CRA
https://codesandbox.io/s/dazzling-mirzakhani-gpshjc?file=/src/HmrTest.tsx

[PengBoUESTC]

that is a bit strange， =_=, because these two project register the HmrTest in same way, maybe vite project is correct...

[nodegin]

I found that you need to name your every component to get HMR work properly, anonymous function doesn't have a name

[robertmusil]

@nodegin But my example doesn't work even if I have "Asd" created as a named function