Dealing With the '"next/font" requires SWC' Error in Next.js
Tags: javascript, nextjs, programming, softwaredevelopment
Published: 2024-01-19 21:30:58

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](https://swc.rs/) 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](https://nextjs.org/docs/advanced-features/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](https://nextjs.org/blog/next-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](https://nextjs.org/blog/next-13), some features like [font optimization](https://nextjs.org/docs/basic-features/font-optimization) require SWC to work. So, if you want to use `next/font` in Next.js 13, your project must not have a `.babelrc`configuration 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](https://nextjs.org/docs/advanced-features/compiler#styled-components) as managed by `babel-plugin-styled-components`

- [Jest support](https://nextjs.org/docs/advanced-features/compiler#jest)

- [Relay support](https://nextjs.org/docs/advanced-features/compiler#relay)

- [React props removal](https://nextjs.org/docs/advanced-features/compiler#remove-react-properties) as in `babel-plugin-react-remove-properties`

- [`console.log()`](https://nextjs.org/docs/advanced-features/compiler#remove-react-properties) [removals](https://nextjs.org/docs/advanced-features/compiler#remove-react-properties) as in `babel-plugin-transform-remove-console`

- [Code minification](https://nextjs.org/docs/advanced-features/compiler#minification)

- [Module transpilation](https://nextjs.org/docs/advanced-features/compiler#module-transpilation)

- [Modularized imports](https://nextjs.org/docs/advanced-features/compiler#modularize-imports) as in `babel-plugin-transform-imports`

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

```json
{
  "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:

```javascript
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](https://writech.run/blog/dealing-with-the-next-font-requires-swc-error-in-next-js-a3c2f159343e/)" appeared first on [Writech](https://writech.run)._