turbo
turbo copied to clipboard
vercel
[Turbopack] @Next/Font is not working properly with turbopack
What version of Turbopack are you using?
default from next 13
What package manager are you using / does the bug impact?
npm
What operating system are you using?
Windows
Describe the Bug
@next/font isn't working with the turbo pack properly. The turbo pack is throwing an error that @next/font/google failed to run or is incorrectly configured while I am importing it in my layout file in the app directory. Alongside the error, it is suggesting that I run the server without a turbo pack. I am trying to import the inter-font as per the documentation. The main reason for this issue is that turbo pack --turbo is running perfectly in all other scenarios if don't use this library.
Expected Behavior
The font should load properly as it does without the turbo pack bundler compilation.
To Reproduce
- Install Next Js 13 using npx
npx create-next-app app-name - Create a new directory with the
appname - Add the
layout.jsxfile in the app directory - Then, create the
page.jsxfile in app directory and create a basic react component - Install @next/font library using node package manager
npm install @next/font - Import @next/font library in layout.jsx using
import { Inter } from "@next/font/google" - Initialize the font by creating the variable
const inter = Inter() - Finally change the HTML tag with this link
<html lang="en" className={inter.className}> - Run the server using
npx next dev --turbo - Open
localhost:3000in your browser. - This error should be visible on the page
Reproduction Repo
No response
I'm encountering the same issue with the same client-side error, however if I check the server logs, it displays the error
warning - [resolve]
Unsupported module
The package @next/font is not yet supported
It seems like this error could be intentional based on that message, but I'm not sure if it may just be left over from previous development. I did also only notice this error happening after upgrading to next v13.0.1, so it seems possible that that release could have broken it.
Yeah, you may be right according to the log message it does seem like that turbopack hasn't yet implemented this module. So for now the old method is working fine for me then. I would really love this module to work with the turbo too. @SkelatorIndy Thanks for your help though.
Hey y'all, we're aware of this limitation. If you look very closely you'll see that we throw an error message about this support. We look forward to bringing support for this very soon!
https://github.com/vercel/turbo/blob/4c5cab2755444fd60aa91aaba798473e58de117b/crates/turbopack/src/lib.rs#L66-L67
#2545 and #2494 are both reporting the same thing. At this point it's not exactly a bug, more a known limitation, and internally we're tracking toward implementing it. @wbinnssmith is the person currently investigating it. 🔜
In the mean time this is a possible workaround to enable using fonts with Turbopack: https://nextjs.org/docs/messages/no-page-custom-font#possible-ways-to-fix-it
I have same issue, any update for this?
I just delete the @next/font use something else to replace it
I have same issue, any update for this?
I just delete the @next/font use something else to replace it
Yes, I have changed to load font by that way https://nextjs.org/docs/messages/no-page-custom-font#possible-ways-to-fix-it and it works. But I cannot use the Optimize Font with turborepo.
Still facing the same issue after updating to 14.0, local font not working
FYI all tests for next/font are now passing so this should work fine with Turbopack when using Next.js 15 (currently release candidate)
@timneutkens I just tested with Next 15 RC version and yes the font's are working fine with Turbo!!!🎉