5

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 | undefined
    }
}
module.exports = nextConfig

then this is my error: Syntax error: "next/font" requires SWC although Babel is being used due to a custom babel config being present. Read more: https://nextjs.org/docs/messages/babel-font-loader-conflict

I tried using custom babel config and in the next.config.js but not work as expected.

And, this is my _Document:

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext
} from 'next/document'
import { ServerStyleSheet } from 'styled-components'

export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    const sheet = new ServerStyleSheet()
    const originalRenderPage = ctx.renderPage

    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            sheet.collectStyles(<App {...props} />)
        })

      const initialProps = await Document.getInitialProps(ctx)
      return {
        ...initialProps,
        styles: (
          <>
            {initialProps.styles}
            {sheet.getStyleElement()}
          </>
        )
      }
    } finally {
      sheet.seal()
    }
  }

  render() {
    return (
      <Html lang="pt-BR">
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
Yuri Oliveira Gochi
  • 51
  • 1
  • 3
  • That error is because you're importing a font from the `next/font` module. It usually does it in the`_app.tsx` file by default. To import fonts, use an import statement inside your `globals.css` – Cole Ogrodnick Apr 25 '23 at 03:26

1 Answers1

-2

Delete in .babelrc file this code
"presets": ["next/babel", "@babel/preset-typescript"] and it is will be working

Aziz Bek
  • 7