React Fast Refresh (HMR) not working with styled components in certain conditions about vite-plugin-react

[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