Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

6.0.0-canary.3 Styled JSX presets not applying #4159

Closed
1 task done
brycejacobs opened this issue Apr 16, 2018 · 3 comments · Fixed by #4215
Closed
1 task done

6.0.0-canary.3 Styled JSX presets not applying #4159

brycejacobs opened this issue Apr 16, 2018 · 3 comments · Fixed by #4215
Assignees

Comments

@brycejacobs
Copy link

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
Copy link
Member

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

@brycejacobs
Copy link
Author

Opened PR #4162 to address this issue.

@timneutkens timneutkens removed good first issue Easy to fix issues, good for newcomers help wanted labels Apr 18, 2018
@timneutkens timneutkens self-assigned this Apr 18, 2018
@kheruc
Copy link
Contributor

kheruc commented Apr 26, 2018

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"] }]]
}

@lock lock bot locked as resolved and limited conversation to collaborators Apr 26, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants