next.js: Can't build app with 9.4.0 when using custom babel config

Bug report

Describe the bug

Since v9.3.7-canary.17 I can’t build my app. It builds forever. When I remove the custom .babelrc it works fine again.

{
  "presets": [
    [
      "next/babel",
      {
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass", "styled-jsx-plugin-postcss"]
        }
      }
    ]
  ],
  "plugins": [
    ["macros"],
    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "~": "./"
        }
      }
    ],
    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragmaFrag": "React.Fragment"
      }
    ]
  ]
}

About this issue

Original URL
State: closed
Created 4 years ago
Reactions: 3
Comments: 20 (18 by maintainers)

Most upvoted comments

We do not use styled-jsx-plugin-postcs at Vercel. We’ve begun moving away from styled-jsx in favor of the built-in CSS support (no new code uses styled-jsx, and we’re migrating old components).

@Timer This is kind of a surprise for me that you are going away from styled-jsx. What about cases where you want stuff like:

<style jsx>{`
  .something {
    transform: ${isOpen ? 'translateY(-50%) rotate(180deg)' : 'translateY(-50%)'};
  }
`}</style>

Can you explain your thoughts somewhere, because i am also using styled-jsx-plugin-postcss, and almost only styled-jsx

TommySorensen on May 11, 2020

@Timer what’s the way to go to enable postcss or just css-prefixing with the built-in solution styled-jsx in Next.js? Shouldn’t it be such an essential plugin part of the core packages? styled-jsx-plugin-postcss is not maintained.

Or do I miss something? Is styled-jsx-plugin-postcss used by any of your teammates at Vercel?

styled-jsx has autoprefixing built in though: https://github.com/zeit/styled-jsx#vendorprefixes

But saw that you posted a reply on the postcss plugin that you went with the other approach @timer outlined 👍

timneutkens on May 12, 2020

@Timer what’s the way to go to enable postcss or just css-prefixing with the built-in solution styled-jsx in Next.js? Shouldn’t it be such an essential plugin part of the core packages? styled-jsx-plugin-postcss is not maintained.

Or do I miss something? Is styled-jsx-plugin-postcss used by any of your teammates at Vercel?

StarpTech on May 11, 2020