Skip to content

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

@jonahallibone

Description

@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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    TurbopackRelated to Turbopack with Next.js.

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions