question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't build app with 9.4.0 when using custom babel config

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:3
  • Comments:20 (18 by maintainers)

github_iconTop GitHub Comments

2reactions
TommySorensencommented, May 11, 2020

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

1reaction
timneutkenscommented, 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?

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 👍

Read more comments on GitHub >

github_iconTop Results From Across the Web

Custom .babelrc config does not work on 9.4.0 #12740 - GitHub
Bug report When using custom configs in next.config.js and a custom .babelrc file, the custom babel config is not applied.
Read more >
Configure Babel
Babel can be configured! Many other tools have similar configs: ESLint ( .eslintrc ), Prettier ( .prettierrc ). All Babel API options are...
Read more >
babel-preset-env not changing build size - Stack Overflow
I have an ES6 React app that is being bundled with webpack and using babel. I am configuring babel-preset-env, for node everything is...
Read more >
Advanced Features: Customizing Babel Config - Next.js
To start, you only need to define a .babelrc file (or babel.config.js ) at the top of your app. If such a file...
Read more >
Package List — Spack 0.20.0.dev0 documentation
This is a list of things you can install using Spack. It is automatically generated based on the packages in this Spack version....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found