#Turbopack failed to compile

1 messages · Page 1 of 1 (latest)

clear sparrow
#

I'm trying to use a local font with 'next/font/local'. My page.js looks like this:

import Image from 'next/image'
import localFont from 'next/font/local'

const myFont = localFont({src: '../public/neue-gaas-grotesk-rg.woff'})

export default function Home() {
  return (
    <main className={myFont.className}>

      Hello World!

    </main>
  )
}

This works and compiles fine when I use webpack, but with the turbopack I receive the error:

Turbopack failed to compile
Error during SSR Rendering

error - [rendering] [root of the server]/  Error during SSR Rendering
  TypeError: __TURBOPACK__imported__module__$5b$project$5d2f$node_modules$2f$next$2f$font$2f$local$2f$index$2e$js__$28$ecmascript$29__.default is not a function

How can I fix this?

olive birchBOT
#

Hi @clear sparrow. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Hmm, I don't know enough to give you a confident answer yet. However, you can refer to the Next.js documentation on font optimization (https://nextjs.org/docs/basic-features/font-optimization) and the Next.js API reference for next/font (https://nextjs.org/docs/api-reference/next/font) for more information on using local fonts with Next.js.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

Basic Features: Font Optimization | Next.js

Optimizing loading web fonts with the built-in next/font loaders.

next/font | Next.js

Optimizing loading web fonts with the built-in next/font loaders.