@emotion/babel-preset-css-prop or babel-plugin-emotion is not work well with react-refresh

[lightyen]

I'm a beginner with emotion and react fast refresh, I found that emotion doesn't work well with react-refresh.

The input data should not be clear after hot update, it annoyed me when I want to develop something.

I also tried styled-components(babel-plugin-styled-components), it works nicely.

Current behavior:

Input data is gone after hot update.

To reproduce:

https://github.com/lightyen/emotion-react-refresh-demo

Expected behavior:

Input data keep the same value after hot update.

Environment information:

Described in demo repo.

[Andarist]

Hi! Thank you for reporting this - it's a very interesting case. I've debugged this down to logic within react-refresh/babel which doesn't recognize this Comp:

const Comp = styled('div')()
const App = () => <Comp/>

not being recognized as a component and thus is not being registered for Fast Refresh. I'm going to create an issue in their repository about this soon.

[Andarist]

Well, in the ned I've created a PR fixing this issue: facebook/react#19514 . Please follow it to check how it will be resolved by the React team - I'm going to close the issue here as it doesn't seem to be tightly coupled to Emotion and it has only been surfaced by your repro case when using Emotion.

Thanks again for raising it!