Dealing With the '"next/font" requires SWC' Error in Next.js

I recently migrate a project to Next.js 13 and stumbled across the error ""next/font" requires SWC although Babel is being used due to a custom babel config being present."

The reason behind it is that I was using a .babelrc file, but the next/font feature requires using SWC instead of Babel for compilation.

Let's learn what SWC is, why Vercel officially promotes it as an alternative to Babel, and how to migrate a Next.js project from Babel to SWC.

Why Does ""next/font" requires SWC although Babel is being used" Occurs?

SWC is an extensible Rust-based platform that can be used for compilation, minification, bundling, and more. At the time of writing, it is officially supported by Next.js, Parcel, and Deno. In detail, the Next.js compiler is written in Rust using SWC.

The Next.js Compiler is 17x faster than Babel, and here is why Next.js is recommending it. Even though it is enabled by default since Next.js 12, if you have an existing Babel configuration, your application will automatically opt out of the Next.js Compiler and proceed with Babel.

At the same time, starting from Next.js 13, some features like font optimization require SWC to work. So, if you want to use next/font in Next.js 13, your project must not have a .babelrcconfiguration file. Otherwise, Next.js will use Babel for compilation and fail with:

"next/font" requires SWC although Babel is being used due to a custom babel config being present.

Instead, you need SWC. Let's learn how to configure it!

Migrate From Babel to SWC

As of Next.js 12, SWC is enabled by default. Thus, no additional configuration is needed to enable it. To get Next.js to use it, simply delete the .babelrc or babel.config.js file. Next.js will now adopt SWC for compilation and the error will disappear.

At the same time, there was a reason for using a custom Babel configuration file. As a result, you need to set up SWC to match the old configuration.

The development team behind Next.js is working hard to migrate to SWC all the functionality offered by the most popular Babel plugins. Specifically, next.config.js now supports more features than ever.

These include:

• Partial support for Styled Components as managed by babel-plugin-styled-components

• Jest support

• Relay support

• React props removal as in babel-plugin-react-remove-properties

• console.log() removals as in babel-plugin-transform-remove-console

• Code minification

• Module transpilation

• Modularized imports as in babel-plugin-transform-imports

For example, a .babelrc file using babel-plugin-transform-imports as follows:

{
  "plugins": [
    [
      "babel-plugin-transform-imports",
      {
        "lodash": {
          "transform": "lodash/${member}",
          "preventFullImport": true
        },
        "react-bootstrap": {
          "transform": "react-bootstrap/${member}",
          "preventFullImport": true
        }
      }
    ]
  ]
}

can be translated into the next.config.js file below:

const nextConfig = {
  modularizeImports: {
    "react-bootstrap": {
      transform: "react-bootstrap/{{member}}",
    },
    lodash: {
      transform: "lodash/{{member}}",
    },
  },
  // ...
}

module.exports = nextConfig

Adiós Babel! Bye Bye to the "requires SWC" error!

Conclusion

In this article, we saw why the "requires SWC" error occurs in Next.js 13. In particular, you realized that some functions in Next.js now require SWC to work. This is a more efficient alternative to Babel and can be easily adopted because of Next.js' extensive built-in support. This will fix the error.

Thanks for reading! I hope you found this article helpful.

The post "Dealing With the '"next/font" requires SWC' Error in Next.js" appeared first on Writech.