babel-plugin-styled-components
babel-plugin-styled-components copied to clipboard
Seems this plugin is NOT compatible with babel-plugin-import
Hi, I'd thank you for this awesome plugin first, it makes writing one-time styled components a lot easier!
But I've a problem using it with another plugin, i.e. babel-plugin-import
, would you take a look?
It's created by create-react-apps. I ejected config files using yarn eject
, then added 4 dependencies, antd
, babel-plugin-import
, styled-components
and babel-plugin-styled-components
.
After clone and run it with yarn && yarn start
, You'll see 3 sections in the page, each section contains one button (the 3rd is hidden by default).
The first and the second button shows that if a file was only processed one of the babel plugins, it won't fail.
The third button is a combination of first two, which processed by both of the plugins.
Please uncomment it in src/App.js
, you should see that page crashes with error Button is not defined
.
Thanks!
One more detail:
From the compiled code, lines of antd
(which should have been processed by babel-plugin-import) did not show up. (You'll see this by comparing compiled code of button1 and button3)
Maybe babel-plugin-styled-components overwrote that?
I was using both of these plugins until today in a forked version of react-scripts. While it seemed to work, I just noticed it caused ie11 to crash completely because of the combination of plugins mentioned above. So ended up removing the babel-plugin-import.
Actually I take it back, this also did not work besides ie11, as stated above styled(SomeAntDComponent)