6.0.0-canary.3 Styled JSX presets not applying

[brycejacobs]

For whatever reason, the latest canary with babel 7 isn't working well with styled jsx plugins via custom babelrc.

• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Expected to build the page and display in dev environment, instead spits error each build.

Current Behavior

Instead of building page, the following error is displayed.

Module build failed: Error: Nesting detected at 11:9. Unfortunately nesting is not supported by styled-jsx.

Steps to Reproduce (for bugs)

1. Download and install with-styled-jsx-plugins example from next repo.
2. yarn add next@6.0.0-canary.3 react@16.3.2 react-dom@16.3.2
3. yarn dev
4. goto localhost:3000

I can verify that the babel preset next/babel isn't receiving any custom options, so when the preset looks for the options, they aren't found.

https://github.com/zeit/next.js/blob/canary/server/build/babel/preset.js#L55

Context

Impossible to build pages currently.

Your Environment

Tech	Version
next	6.0.0-canary.3
node	9.3.0
OS	High Sierra
browser	Chrome
etc

[timneutkens]

Interesting, good catch! Feel free to check it out 👍 (I'll do it eventually)

[brycejacobs]

Opened PR #4162 to address this issue.

[kheruc]

I got the same "Unfortunately nesting is not supported by styled-jsx." error when I upgraded to Next 6 canary. I figured out that I had to modify my .babelrc file.
This is what worked before:

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass"]
        }
      }
    ]
  ]
}

and this is what I had to change it to for Next 6:

{
  "presets": ["next/babel"],
  "plugins": [["styled-jsx/babel", { "plugins": ["styled-jsx-plugin-sass"] }]]
}