Create-react-app: Is there any way to add a Babel plugin without ejecting?

Created on 27 Jul 2017  路  3Comments  路  Source: facebook/create-react-app

I really want to use babel-plugin-styled-components.

Is there any way to do this without ejecting?

Most helpful comment

No, I want it for this:

Better debugging

This babel plugin adds the components' name to the class name attached to the DOM node. In your browsers DevTools you'll see <button class="sc-Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

This also adds support for showing your components' real name in the React DevTools. They will normally show <styled.button> for all of your components, but with this plugin they show <MyButton />.

This makes it easier to find your components and to figure out where they live in your app.

I agree server-prerendering shouldn't be a high priority for create-react-app, because if an app gets to the point where the developer wants to do that, they should probably be willing to eject. But there are other use cases, such as the feature quoted above, where adding a custom Babel plugin would be very useful in early development.

But there is a discussion about another possible way to implement this in #2730.

Babel macros are an interesting idea, but I can't see how they would help in my case.

All 3 comments

Are you sure you need this?

https://github.com/styled-components/babel-plugin-styled-components

鈿狅笍 This plugin is only necessary if you're server-side rendering, you can use styled-components perfectly fine without it! 鈿狅笍

https://github.com/facebookincubator/create-react-app#limitations
Some features are currently not supported:

  • Server rendering.

I don鈥檛 think we鈥檒l be opening up our Babel config in the close future. But there is a discussion about another possible way to implement this in https://github.com/facebookincubator/create-react-app/issues/2730.

No, I want it for this:

Better debugging

This babel plugin adds the components' name to the class name attached to the DOM node. In your browsers DevTools you'll see <button class="sc-Button-asdf123 asdf123" /> instead of just <button class="asdf123" />.

This also adds support for showing your components' real name in the React DevTools. They will normally show <styled.button> for all of your components, but with this plugin they show <MyButton />.

This makes it easier to find your components and to figure out where they live in your app.

I agree server-prerendering shouldn't be a high priority for create-react-app, because if an app gets to the point where the developer wants to do that, they should probably be willing to eject. But there are other use cases, such as the feature quoted above, where adding a custom Babel plugin would be very useful in early development.

But there is a discussion about another possible way to implement this in #2730.

Babel macros are an interesting idea, but I can't see how they would help in my case.

Was this page helpful?
0 / 5 - 0 ratings