ricsands2801 commented 8 months ago

Font Name (Geist Sans/Geist Mono):

[ X] Geist Sans
[ X] Geist Mono

Description of the Issue: Running nextjs 13.5.6 (or 14) and get the following after installing the font. Inter font via next/font works correctly

Error: @next/font/local failed to run or is incorrectly configured. If you just installed @next/font, please try restarting next dev and resaving your file.

A restart does not resolve

Steps to Reproduce:

install geist font
add to layout
run dev

Expected Behavior: Font works

Environment (please complete the following information):

Nextjs 13.5.6
node 21
pnpm
geist 1.0
turborepo

mwskwong commented 8 months ago

I guess it is an issue of how localFont works.

In short, this error will be thrown if importing the font to a client component/function. The workaround (or maybe this is how it is supposed to be used?) is to import it to a server component, e.g., root layout and make use of the CSS variable, if needed.

eyenalxai commented 8 months ago

import './globals.css'
import { ReactNode } from 'react'
import { GeistSans } from 'geist/font'

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" className={GeistSans.className}>
      <body>
        <main>{children}</main>
      </body>
    </html>
  )
}

Still the same error :(

Next.js 14 Yarn 4 Node 20 Turbopack enabled

ricsands2801 commented 8 months ago

I would expect a font to work outside of server side.

No difference though if switched to server

esau-morais commented 8 months ago

The issue is due to turbo. I was running next dev --turbo and just needed to remove the argument to prevent the error. IMO, once it is upstream, turbo should stop before getting to start the server, just as it is when using serverActions or typedRoutes

mhughdo commented 8 months ago

Removing the --turbo flag in the next dev command also did the trick for me

ricsands2801 commented 8 months ago

I have no turbo flag with error remaining

4Furki4 commented 8 months ago

Hi folks,

I faced the same issue in v14.0.1 and v14 even if I didn't run my app with the turbo flag. It seems that we can't use Geist fonts in client components because It was throwing the error in my root layout which is a client component but now I can use the fonts in a layout of route groups which is a server component. Looking for the support of using geist fonts in client components!

Last but not least, the other workaround is downloading the Geist font files and using them with localFont function.

Edit: I just noticed that turbo flag breaks the app and throws the same error even if I imported geist font in server components :(

tinrab commented 8 months ago

Same issue. I'm trying to get it to work with Storybook.

ReferenceError: __dirname is not defined
    next geist_font.js:1273
    next geist_font.js:1276
    __require2 chunk-AUZ3RYOM.js:18
    pnpm geist_font.js:1622
    __require2 chunk-AUZ3RYOM.js:18
    <anonymous> font.js:1
runtime.js:4:101006
    error http://localhost:6006/sb-preview/runtime.js:4
    renderPreviewEntryError http://localhost:6006/sb-preview/runtime.js:89
    renderPreviewEntryError http://localhost:6006/sb-preview/runtime.js:103
    getProjectAnnotationsOrRenderError http://localhost:6006/sb-preview/runtime.js:87
    _runRejections http://localhost:6006/sb-preview/runtime.js:4
    _runRejections http://localhost:6006/sb-preview/runtime.js:4
    _setRejected http://localhost:6006/sb-preview/runtime.js:4
    _failWith http://localhost:6006/sb-preview/runtime.js:4
    _runRejections http://localhost:6006/sb-preview/runtime.js:4
    _runRejections http://localhost:6006/sb-preview/runtime.js:4
    _setRejected http://localhost:6006/sb-preview/runtime.js:4
    _failWith http://localhost:6006/sb-preview/runtime.js:4
    _chainPromiseData http://localhost:6006/sb-preview/runtime.js:4

JohnPhamous commented 8 months ago

37 should fix this!

nagman commented 7 months ago

I've just installed it (1.1.0) and I get:

next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function

in Storybook 7.5.3.

I think I'll just stick to the localFont method, as suggested by @4Furki4

4Furki4 commented 7 months ago

I've just installed it (1.1.0) and I get:
next_font_local__WEBPACK_IMPORTED_MODULE_0___default(...) is not a function
in Storybook 7.5.3.

I think I'll just stick to the localFont method, as suggested by @4Furki4

Hey dude. I was having the same issue today when I try to run my application in dev mode using turbopack. Fortunately, updating my next version to 14.0.3 solved the issue. Hope it does the trick for you as well.

nagman commented 7 months ago

Alas... it did not do the trick :/ I've just updated next from 14.0.1 to 14.0.3 and I still have the exact same error with Storybook.

tobiaszkrolak commented 7 months ago

Inside NextJS everything is alright, but in Storybook i also experienced: "TypeError:next_font_localWEBPACK_IMPORTED_MODULE0default(...)"

Next.js 14.0.3 Geist 1.2.0 Yarn 3.6.4 Node 18.14

ugamestudio commented 4 months ago

The error is still there

bluebreadhead commented 1 month ago

The devs don't care

vercel / geist-font

Error: @next/font/local failed to run or is incorrectly configured #16

37 should fix this!