"next/font" requires SWC although Babel is being used due to a...

bash_bob

Im facing this error when I try to run my Nextjs project using styled components. This is my .babelrc { "plugins": [ [ "babel-plugin-styled-components", { "ssr": true, "displayName": true } ] ], "presets": ["next/babel", "@babel/preset-typescript"] } this is my next.config.js: /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, styledComponents: Boolean | { displayName: Boolean | undefined, ssr: Boolean |...

Originally asked by Yuri Oliveira Gochi on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

The "Babel and next/font Conflict" error occurs when we use next/font with a custom Babel config. When we have a custom Bible config we opt out of the Next.js compiler which is required when using next/font For this reason to resolve this error we can remove the Babel config for example the .babelrc . This page is a good reference for more details on the error: https://nextjs.org/docs/messages/babel-font-loader-conflict

Full answer by Catto: https://stackoverflow.stackexchange.com/a/77570252 (CC BY-SA 4.0).

Need it done for your business? UphillTech.