-
-
Notifications
You must be signed in to change notification settings - Fork 112
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
React Fast Refresh (HMR) not working with styled components in certain conditions #26
Comments
U can use like this to avoid this problem I think project create by your project |
@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 |
that is a bit strange, =_=, because these two project |
I found that you need to name your every component to get HMR work properly, anonymous function doesn't have a name |
@nodegin But my example doesn't work even if I have "Asd" created as a named function |
Describe the bug
When using styled components (
@emotion/styled
in my case) if the file contains any other react-like-components (detected byisComponentLikeIdentifier
) 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
Used Package Manager
yarn
Logs
No response
Validations
The text was updated successfully, but these errors were encountered: