Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Turbopack rejects global CSS in `pages/_app.tsx` when `next/font` is imported [1 comments, 2 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#93160•Fetched 2026-04-24 05:50:41
View on GitHub
Comments
1
Participants
2
Timeline
8
Reactions
0
Author
jantimonjantimon
Participants
github-actions[bot]github-actions[bot]jantimonjantimon
Timeline (top)
labeled ×5closed ×1commented ×1locked ×1

Error Message

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

Code Example

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

---

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
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

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

To Reproduce

  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:

variantturbopack
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 [email protected] - no canary bisection done

extent analysis

TL;DR

Move global CSS imports to a separate file or convert them to Component-Level CSS to resolve the Turbopack build error.

Guidance

  • Verify that the error occurs only when both next/font and global CSS are imported in _app.tsx.
  • Try moving the global CSS import to a separate file, such as pages/_app.js, as suggested by the error message.
  • Alternatively, consider converting the global CSS import to Component-Level CSS (CSS Modules) to avoid conflicts.
  • Test the build with next build --webpack to confirm that the issue is specific to Turbopack.

Example

No code snippet is provided as the issue is more related to configuration and build process.

Notes

The issue seems to be specific to Turbopack and does not occur with Webpack. The error message suggests moving global CSS imports to a separate file or converting them to Component-Level CSS.

Recommendation

Apply workaround: Move global CSS imports to a separate file or convert them to Component-Level CSS, as this approach is suggested by the error message and is a common solution to avoid conflicts with global stylesheets.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#batch processing#GPU compatibility#latency issue#model loading#dependency error

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING