Turbopack crashes in `pages/_app.tsx` when `next/font` is imported
Nobody has claimed this yet.
- 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:
- clone the repo
npm installnpm run build- 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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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