Next.js Discord

Discord Forum

next/font/google not working after upgrading to latest next.js (16.0.3)

Unanswered
jonahallibone posted this in #help-forum
Open in Discord
I upgraded my project from Next.js 15 to Next.js 16 today, now the font loader causes compilation error:
## Error Type
Build Error

## Error Message
Ecmascript file had an error

## Build Output
./frontend/src/styles/fonts.ts:69:1
Ecmascript file had an error
  67 | });
  68 |
> 69 | const inconsolata = Inconsolata({
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
> 70 |   weight: ["500"],
     | ^^^^^^^^^^^^^^^^^^
> 71 |   style: ["normal"],
     | ^^^^^^^^^^^^^^^^^^
> 72 |   subsets: ["latin"],
     | ^^^^^^^^^^^^^^^^^^
> 73 |   variable: "--font-inconsolata",
     | ^^^^^^^^^^^^^^^^^^
> 74 |   display: "swap",
     | ^^^^^^^^^^^^^^^^^^
> 75 | });
     | ^^^^
  76 |
  77 | export const fonts = {
  78 |   interFont,

Font loader calls must be assigned to a const

Import traces:
  Browser:
    ./frontend/src/styles/fonts.ts
    ./frontend/src/pages/_app.tsx

  SSR:
    ./frontend/src/styles/fonts.ts
    ./frontend/src/pages/_app.tsx

Next.js version: 16.0.3 (Turbopack)

I have tried to reproduce this on a fresh project with the exact same structure, and could not. I have debugged this every which way I can think and cannot figure this out. It's directly tied to Turbopack, as using --webpack during next dev does resolve the issue. Our app is just incredibly slow with webpack (we've been on turbo for almost 2 years with no issues).

1 Reply

for anyone curious, this is a problem with sentry > 10.x