Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error using babel plugins for CSS (ie. babel-plugin-styled-components)

See original GitHub issue

Hi, I’m trying to use styled-components to manage my CSS. I need SSR take into account CSS too and because of this I have created a .babelrc file with:

{
  "plugins": [
    "styled-components"
  ]
}

My page index.js is as simple as:

const App = ({ children, title = '' }) => (
  <div>
    <Head>
      <title>{ title }</title>
      <meta charSet='utf-8' />
      <meta name='viewport' content='initial-scale=1.0, width=device-width' />
      <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' />
    </Head>
    <header>
      <nav>
        <Link href='/'><a>Home</a></Link> |
        <Link href='/about'><a>About</a></Link> |
        <Link href='/contact'><a>Contact</a></Link>
      </nav>
    </header>

    <Zone>
      { children }
    </Zone>

    <footer>
      Footer
    </footer>
  </div>
)

export default () => (
  <App>
    Nothing to show
  </App>
)

But I’m getting next error when the page is compiled

 ERROR  Failed to compile with 1 errors                                                                                                                                          6:55:53 PM

 error  in ./pages?entry

Syntax Error: Unexpected token (11:2)

   9 |
  10 | const App = ({ children, title = '' }) => (
> 11 |   <div>
     |   ^
  12 |     <Head>
  13 |       <title>{ title }</title>
  14 |       <meta charSet='utf-8' />

In addition, as an alternative, I have tried to use css-modules with babel-plugin-react-css-modules but same error in the same place is thrown.

Issue Analytics

State:
Created 7 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

1reaction

sorin-davidoicommented, Mar 8, 2017

You need to add

"presets": [
    "next/babel"
  ]

to .babelrc (see this).

0reactions

chrisjcodescommented, Apr 11, 2017

@acanimal and @coliverav89 If youre seeing: Uncaught TypeError: _styledComponents2.default.div.withConfig is not a function

Make sure your using v2 of styled-components. Refer to this github issue: https://github.com/styled-components/babel-plugin-styled-components/issues/43#issuecomment-293350554

Top Results From Across the Web

Nothing transformed (usage with webpack and typescript) #19

I tried to use the plugin together with webpack (babel-loader) and ... no error but the plugin shows no effect, i.e. the CSS...

babel-plugin-styled-components not working - Stack Overflow

I've been trying to get the babel-plugin-styled-components plugin to work with my webpack/babelrc configuration but I have not been able to ...

babel-plugin-styled-components - npm

Start using babel-plugin-styled-components in your project by running `npm i babel-plugin-styled-components`. There are 1122 other projects ...

babel-loader - webpack

This package allows transpiling JavaScript files using Babel and webpack. Note: Issues with the output should be reported on the Babel Issues tracker....

Stop using CSS in JavaScript for web development

CSS isn't going anywhere. A lot of the projects choose to style documents in JavaScript for wrong reasons. This article lists common misconceptions...