vercel / vercel/next.js

Turbopack crashes in `pages/_app.tsx` when `next/font` is imported

Open
#93,162 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

CSS Font (next/font) Pages Router Turbopack
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/jantimon/repro-turbopack-font-bug

To Reproduce

minimal source:

styles/globals.css

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
}

pages/_app.tsx

import "../styles/globals.css";
import type { AppProps } from "next/app";
import { Geist_Mono } from "next/font/google";

export const geistMono = Geist_Mono({
  variable: "--font-geist-mono",
  subsets: ["latin"],
});


export default function App({ Component, pageProps }: AppProps) {
  return (
    <main className={geistMono.className}>
      <Component {...pageProps} />
    </main>
  );
}

steps:

  1. clone the repo
  2. npm install
  3. npm run build
  4. error below

also reproduces with next dev --turbopack returns 500 on /

Current vs. Expected behavior

turbopack throws Global CSS cannot be imported from files other than your Custom <App> on pages/_app.tsx even though _app.tsx IS the custom app

only triggers when _app.tsx imports BOTH a global css file AND next/font - remove either and build passes

webpack builds the same file fine

error from next build --turbopack:

Error: Turbopack build failed with 1 errors:
./pages/_app.tsx
Global CSS cannot be imported from files other than your Custom <App>.
Due to the Global nature of stylesheets, and to avoid conflicts, Please move all first-party global CSS imports to pages/_app.js. Or convert the import to Component-Level CSS (CSS Modules).
Location: pages/_app.tsx
Import path: ../styles/globals.css

expected: turbopack accepts global css in _app.tsx same as webpack does

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.3.0
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 24.13.0
  npm: 11.6.2
  Yarn: 1.22.19
  pnpm: 10.33.1
Relevant Packages:
  next: 16.3.0-canary.2 // Latest available version is detected (16.3.0-canary.2).
  eslint-config-next: N/A
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

CSS, Font (next/font), Pages Router, Turbopack

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

next dev (local), next build (local)

Additional context

trigger matrix from the repro:

variant turbopack
font + global css in _app.tsx ❌ fails
only global css
only next/font
font + css with relative path instead of @/ alias
font + css with --webpack
font + css with next dev --turbopack ❌ 500

also reproduces on next@16.2.4 - no canary bisection done

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the linked reproduction with npm run build, then compare it with --webpack and next dev --turbopack. Trace how Turbopack handles the global CSS import in pages/_app.tsx when next/font/google is also imported; done means the reproduction builds and serves / without the false Custom App error.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, nextjs, react, typescript
Domain
build-system, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.