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

[StarpTech]

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

[StarpTech]

When I remove

{
        "styled-jsx": {
          "plugins": ["styled-jsx-plugin-sass", "styled-jsx-plugin-postcss"]
        }
      }

it works. What has changed since?

[Timer]

Sorry, but we cannot find the bug in your setup without a full reproducible demo.

Some things stand out though:

    [
      "@babel/plugin-transform-react-jsx",
      {
        "pragmaFrag": "React.Fragment"
      }
    ]

This is unnecessary, and likely causes deoptimized output.

[Timer]

This is no longer necessary as of Next.js 9.4 if you use the new absolute imports support:

    [
      "module-resolver",
      {
        "root": ["./"],
        "alias": {
          "~": "./"
        }
      }
    ],

[StarpTech]

I also tried

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

same bug. The issue is styled-jsx integration.

[StarpTech]

@Timer I removed both configs thanks for that but the issue is still there. The issue is styled-jsx integration see above.

[Timer]

Again, without a full reproducible demo we cannot help you figure out what is wrong in your application. Please provide one!

[StarpTech]

Here is the repro https://github.com/StarpTech/next.js/tree/repro_for_12727

[StarpTech]

Could be related to https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues/32

[Timer]

Indeed, this appears unrelated to Next.js and is likely https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues/31.

[StarpTech]

@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?

[Timer]

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).

[TommySorensen]

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

[StarpTech]

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).

What're the reasons? It would be great to spread that knowledge to the community.

[StarpTech]

@TommySorensen use style prop directly?

[Timer]

CSS-in-JS solutions unnecessarily bloat your JavaScript bundle, whereas the built-in CSS support extracts into CSS files and has (near) zero runtime overhead. This results in less JavaScript / faster hydration.

We still use styled-jsx internally (for dynamic styles, like you showed), but it is not our default.

---

Regardless, we've never used styled-jsx-plugin-postcss and are not familiar with how it works. The default syntax features in styled-jsx are enough for our use-case.

This issue should probably be moved to their repo.

[StarpTech]

Please check https://github.com/giuseppeg/styled-jsx-plugin-postcss/issues/31 I came to the conclusion that it must be fixed in styled-jsx. WDYT?

[timneutkens]

@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 👍

[StarpTech]

styled-jsx has autoprefixing built in though: zeit/styled-jsx#vendorprefixes

This was just one example. The extensibility is very limited due to the fact that plugins must be synchronous. This leads to hacks like "deasync".

[soren121]

As an example of other use cases, I was using the postcss plugin to add this polyfill for object-fit: https://github.com/fregante/object-fit-images

I'm working around it by adding the required properties manually, but that's not ideal.