babel-plugin-styled-components icon indicating copy to clipboard operation
babel-plugin-styled-components copied to clipboard

Seems this plugin is NOT compatible with babel-plugin-import

Open EnixCoda opened this issue 5 years ago • 3 comments

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?

Sample project


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!

EnixCoda avatar Feb 14 '19 08:02 EnixCoda

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?

EnixCoda avatar Feb 14 '19 08:02 EnixCoda

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.

RikuVan avatar Mar 26 '19 09:03 RikuVan

Actually I take it back, this also did not work besides ie11, as stated above styled(SomeAntDComponent)

RikuVan avatar Mar 26 '19 11:03 RikuVan