Using `next/font` results in `Font loader calls must be assigned to a const` in Pages Router

[jonahallibone]

Link to the code that reproduces this issue

https://github.com/jonahallibone/next-font-bug

To Reproduce

1. npm install
2. npm run dev
3. Error

Current vs. Expected behavior

I don't expect an error

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.6.0: Mon Jul 14 11:30:29 PDT 2025; root:xnu-11417.140.69~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 24.11.1
  npm: 11.6.2
  Yarn: 1.22.19
  pnpm: 9.6.0
Relevant Packages:
  next: 16.0.7 // Latest available version is detected (16.0.7).
  eslint-config-next: N/A
  react: 19.2.1
  react-dom: 19.2.1
  typescript: 5.9.3
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

Turbopack

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

This was happening in our monorepo on one project, so I extracted the project and progressively brought it down to this reproduction

The error is

Build Error


Ecmascript file had an error
./src/pages/_app.tsx (4:1)

Ecmascript file had an error
  2 | import { Inter } from "next/font/google";
  3 |
> 4 | const inter = Inter({ subsets: ["latin"] });
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  5 |
  6 | export default function App({ Component, pageProps }: AppProps) {
  7 |   return (

Font loader calls must be assigned to a const

Things I have tried:

1. Moving font definitions into a module and importing them
2. Removing almost all of our other dependencies

The resolution is to not use next/font at all. Once this starts to happen, it is also incredibly difficult to undo, because the cause is unknown. There is also very little in way of errors. The console only reports a 500 on the route, and the browser console logs the same error as in the overlay. I assume, based on the error, that this is a problem with SWC. I am only able to reproduce this by paring down my project. Fresh installations of Next.js work completely fine. I am assuming this is related to some other dependency.

[jonahallibone]

Following up here to say that I found resolution for now. It seems the browserlist in my package.json was interfering with Turbo. Removing that resolved the issue. I will leave this open as that is the real issue at hand.

[icyJoseph]

Yeah something is up with that browserslist definiition. I could do:

    "development": [
      "last 3 chrome version"
    ]

And that works 🤔

[jonahallibone]

Tbh I'm not even sure when the browser list was added, did old versions of Next include one by default? This was migrated from create-react-app a couple years ago too so very possible it's a holdover from then as well. Interesting that new versions seem to break with it though.

[icyJoseph]

Looks like it yes, https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers

[jonahallibone]

Looks like it yes, https://create-react-app.dev/docs/supported-browsers-features/#configuring-supported-browsers

@icyJoseph Should I keep this issue open, or close it?