Install babel-plugin-styled-components in create-react-app

Question

I am trying to use the styled-components-babel-plugin with a create-react-app application, to get the components name as classname in my chrome dev tools. But somehow, i do not get the classnames to change. I installed Babel and the plugin like described on the website and created my .babelrc like this:

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

I tried a lot of combinations of presets (including react-app) and other babel configs, also tried to do it in the package.json but I can not get it to work. The problem is, that i never used babel and barely know, why i would need it. So I have no idea, if I made an error on the babel or the styled-components side. Does anybody have a example project with a the working styled-components babel plugin?

Candlepin

Have you added babel-loader to your webpack config? Babel in general converts more modern JS syntax to an older one (that browsers would consume), though babel plugins do a lot of other things.. just like this one – Credendum

I do not have a webpack config. I tried to get this to run, but as I do not know, what I am doing, I am stuck here aswell. I installed some stuff, got a few error messages and now I have a webpack config but webpack run results in an syntaxerror where it does not recognize jsx syntax. Is all this jazz really necessary? After all, I used a create-react-app to start the project. Isn´t there some webpack used under the hood, that I could update? – Candlepin

Hi. I've just checked, internally create-react-app uses both webpack and it seems like here is a discussion on how to use custom babelrc. Hope it helps. If it wont the best thing to do imo would be to setup you configuration from scratch, so it will be fully transparent.. but it may take a while because webpack is a beast in the beginning :-) – Credendum

btw there are tonns of boilerplates (something like webpack-react-babel-bla-bla-boilerplate) to draw inspiration from – Credendum

Ok, I will try that when I am at home again. Is npm eject from create-react-app maybe a mechanism to create the babel/webpack setup? I think i read something like this earlier, but I could not test that. But I think the direction is clear now, thanks ;) – Candlepin

Yes you are right, npm run eject turns sort of transform the app into a proper one. After looking for .bablerc I've noticed that they keep babel settings in package.json, so I suppose you'll probably have to transfer them into a proper babelrc file or keep maintaining into the package.json. Good luck! – Credendum

Jeah, I also tried to install the plugin in the package.json, but maybe I did something wrong there, as that did not work einher. I'll check that again later. – Candlepin

I mean apart from installing the plugin, the actual contents of .babelrc is not in .babelrc, but in the package.json file, like in the docs babeljs.io/docs/usage/babelrc – Credendum

Jeah, that is what i meant. Register may have been the better word ;) – Candlepin

Cool, in case of futher problems pls don't hesitate.. Good luck – Credendum

Hey, I got it to work by ejecting the project. Thanks for the tip! – Candlepin

Answer 1

Create react app v2 has support for babel macros. There is a NPM package for styled-components macro. Just add the package to create react app and you are done.

yarn add styled-components.macro --dev

Doing this does not require eject of CRA.

Renvoi

It was not at the time, but thanks for the heads up! – Candlepin

Alex Mckay's answer helped me with this: also import from styled-components/macro – Shown

Answer 2

There is a much easier way of achieving this and it doesn't require ejecting or any additional packages to be installed:

Instead of importing styled-components like this:

import styled from 'styled-components';

Import it like this:

import styled from 'styled-components/macro';

If that isn't working for you it is likely that you need to update styled-components or react. Further information can be found in the styled-components documentation.

Emilyemina

here's the link to the actual section supporting Alex's answer styled-components.com/docs/tooling#babel-macro – Brevet

Man, your answer really helped me! I spent several hours trying to make that plugin work with no success, and with your answer, I can use its feature in a very easiest way. Thank you very much! – Fellner

Answer 3

After some tips of Daniel, I tried to install the babel plugin another way. As it turns out, you can not add a babel plugin to a create-react-app (https://github.com/facebookincubator/create-react-app/issues/2611) without ejecting it and to install the plugin by hand. To do that, i ran those commands:

npm run eject
npm install --save-dev babel-plugin-styled-components

After that, I got a whole bunch of new files and my package.json got way bigger but also included a section for babel like this:

  "babel": {
    "presets": [
      "react-app"
    ]
  }

all was left to do was to add the babel-plugin there, to be able to use it. So for the styled-components Plugin, my babel section in the package.json now looks like this:

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

Now the plugin works and I am happy =) Thanks Daniel for pointing me in the right direction!

Candlepin

Answer 4

I was facing the same issue, Here is how I resolved this error:

I installed styled-components.macro using npm.

npm i styled-components.macro --dev

And then use it like this:

import styled from 'styled-components/macro';

Picker