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

11
votes

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?

3
reactjsbabeljsstyled-components
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 – Daniel Khoroshko
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? – Simons0n
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 :-) – Daniel Khoroshko
btw there are tonns of boilerplates (something like webpack-react-babel-bla-bla-boilerplate) to draw inspiration from – Daniel Khoroshko
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 – Daniel Khoroshko

3 Answers

10
votes

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.

10
votes

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.

5
votes

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!