styled-components: v2.1.0 throws error when used with next.js

Error: Nesting detected at 1:289. Unfortunately nesting is not supported by styled-jsx.
    at Function.disableNestingPlugin (/home/dre/workspaces/reactjs/phreshr/node_modules/styled-jsx/dist/lib/style-transform.js:19:13)
    at proxy (/home/dre/workspaces/reactjs/phreshr/node_modules/stylis/stylis.js:1133:30)
    at compile (/home/dre/workspaces/reactjs/phreshr/node_modules/stylis/stylis.js:679:10)
    at compile (/home/dre/workspaces/reactjs/phreshr/node_modules/stylis/stylis.js:285:17)
    at stylis (/home/dre/workspaces/reactjs/phreshr/node_modules/stylis/stylis.js:1270:16)
    at stringifyRules (/home/dre/workspaces/reactjs/phreshr/node_modules/styled-components/lib/utils/stringifyRules.js:27:31)
    at ComponentStyle.generateAndInjectStyles (/home/dre/workspaces/reactjs/phreshr/node_modules/styled-components/lib/models/ComponentStyle.js:59:24)
    at StyledComponent.generateAndInjectStyles (/home/dre/workspaces/reactjs/phreshr/node_modules/styled-components/lib/models/StyledComponent.js:124:38)
    at StyledComponent.componentWillMount (/home/dre/workspaces/reactjs/phreshr/node_modules/styled-components/lib/models/StyledComponent.js:153:39)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 2
Comments: 21 (9 by maintainers)

Commits related to this issue

dependencies upgrade - include styled-components and babel-plugin-styled-components [fix](https://github.com/styled-components/styled-components/issues/934) — committed to trickstersio/tricksters.io by ovfireandvoid 7 years ago

Most upvoted comments

@philpl @giuseppeg The x = new stylis pattern landed with 3.2.0

thysultan on Jun 30, 2017

@giuseppeg Yea, this has already been fixed in SC since 17 days haha. Sorry for forgetting to close this issue https://github.com/styled-components/styled-components/releases/tag/v2.1.1

kitten on Jul 20, 2017

@thysultan I’ll push some patches for the babel plugin and SC later then 😄 Awesome work 👍

kitten on Jun 30, 2017

uhm probably Stylis is shared and a singleton and therefore carries over the plugins we register https://github.com/zeit/styled-jsx/blob/master/src/lib/style-transform.js#L66-L71 ? Are you folks using styled-jsx too? Have you tried to remove styled-jsx from the Next.js babel preset? See https://github.com/zeit/next.js/blob/v3-beta/examples/with-styled-jsx-postcss/babel-preset.js Obviously in your case you should remove it instead of replacing, maybe use filter instead of map and then make sure that you register the custom preset https://github.com/zeit/next.js/blob/v3-beta/examples/with-styled-jsx-postcss/.babelrc

giuseppeg on Jun 24, 2017

Implementing it as new stylis(opts) doesn’t cause any overhead when in strict mode so there also that option.

var stylis = new require('stylis')

thysultan on Jun 25, 2017

Sure i can add this to stylis in 3.2.0, which would allow you to use it either via

// factory pattern
var {stylis} = require('stylis')

// default singleton pattern
var stylis = require('stylis')

thysultan on Jun 24, 2017