Create-react-app: How to add a babel plugin

[bernatfortet]

Sorry for my ignorance, but after ejecting I can't seem to figure out how to add a plugin,

I'm used to the simplicity of .babelrc but it seems to not work with create-react-app

Thanks.

When I add .babelrc I get the following error:

[bernatfortet]

I looked at this issue: https://github.com/facebookincubator/create-react-app/issues/1069 by gaearon where he basically says:
after ejecting, in order to use .babelrc you need to add "presets": ["react-app"] for it to work

[Altiano]

How about without ejecting?

[gaearon]

There is no way to add a Babel plugin without ejecting. This helps us ensure that the setup works correctly and isn't suspecticle to very common configuration mistakes or inclusion of unmaitained plugins. What plugin did you want to add?

[Altiano]

Hmm, so there's no other option unless ejecting.
I want to add babel-plugin-transform-export-extensions.
It is a stage 1 proposal but I think it's a pretty solid one and it has been transfered recently to the official tc39 repo (https://github.com/tc39/proposal-export-default-from)

[gaearon]

If you consider syntactic sugar to be more important than being able to get updates to underlying tools, then sure, your best option would be to eject. I probably wouldn’t do it on my project even if I liked the syntax.

I’m not aware of any news about this proposal going forward. Moving the repo could just be a logistical decision (worth checking if other proposals did the same).

[vinhlh]

Just want to add my own translation Babel plugin, but ejecting all stuff doesn't look good.

[gaearon]

I agree we need a better story around handling i18n. A dedicated issue would be better for this though.

[SpencerCDixon]

+1 to the internationalization issue. I really want to eject just to get https://github.com/akameco/babel-plugin-react-intl-auto and https://github.com/akameco/extract-react-intl-messages working :/

[stoyandamov]

So how can I add https://github.com/davidhu2000/react-spinners which MUST use the https://github.com/emotion-js/emotion babel plugin?

[SpencerCDixon]

@stoyandamov I ended up using this: https://github.com/timarney/react-app-rewired

[masumsoft]

We wanted to use the babel plugin provided by styled-components which adds support for server-side rendering, minification of styles and gives a nicer debugging experience while using styled-components with react.

It would be great if we could add plugins by extending the babel config that CRA is currently using internally without ejecting. I guess the api could allow adding something like this in .babelrc or package.json:

{
    "presets": ["react-app"],
    "plugins": ["babel-plugin-styled-components"]
}

[Timer]

You can accomplish this with Babel Macros support coming out in react-scripts@2. See the announcement thread.