Skip to main content
GoodFirstPicks
DashboardIssuesReposLeaderboard

GoodFirstPicks by Leaveitblank © 2026

CreatorRequest a RepoPrivacy PolicyTerms of Service
Using `next/font` results in `Font loader calls must be assigned to a const` in Pages Router | GoodFirstPicks

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

vercel/next.js 15 comments 1mo ago
View on GitHub
mediumopenScope: somewhat clearSkill match: maybeNext.jsTypeScriptReact

Why this is a good first issue

Issue involves browserlist configuration interfering with Turbopack, requiring investigation.

AI Summary

The issue arises when using `next/font` with a specific browserlist configuration, causing Turbopack to fail. The problem seems to be related to how Turbopack handles browserlist definitions, but the exact cause is unclear. Further investigation into Turbopack's handling of browserlist configurations is needed.

Issue Description

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 repr

GitHub Labels

Turbopack

Want to work on this?

Claim this issue to let others know you're working on it. You'll earn 10 points when you complete it!

Risk Flags

  • browserlist configuration
  • Turbopack integration
Loading labels...

Details

Points10 pts
Difficultymedium
Scopesomewhat clear
Skill Matchmaybe
Test Focusedno