nextjs - ✅(Solved) Fix data:text/css imports fail in Pages Router with Turbopack [1 pull requests, 1 comments, 2 participants]

nextjs2026-02-12 09:57:35

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.

GitHub issue URL

Helpful · Quick feedback

GitHub stats

vercel/next.js#89900•Fetched 2026-04-08 00:21:06

View on GitHub

Comments

Participants

Timeline

Reactions

Author

jantimon

Participants

github-actions[bot]

jantimon

Timeline (top)

labeled ×4closed ×1commented ×1cross-referenced ×1

Fix Action

Fixed

Fixed by PR: exempt data URL CSS from Pages Router global CSS restriction (https://github.com/vercel/next.js/pull/89901)

PR fix notes

PR #89901: exempt data URL CSS from Pages Router global CSS restriction

Repository: vercel/next.js
Author: jantimon
State: closed | merged: True
Link: https://github.com/vercel/next.js/pull/89901

Description (problem / solution / changelog)

What?

Skip the Pages Router global CSS restriction for data: URL imports (similar to app router and mixed app/pages router)

Why?

data:text/css should work the same no matter if pages router, app router or mixed router usage

How?

the validation in crates/next-api/src/module_graph.rs already had a carve-out for node_modules. This adds the same for data URL modules.

fixes #89900

Related issues linked using fixes #89900
Tests added

Changed files

crates/next-api/src/module_graph.rs (modified, +6/-2)
test/e2e/css-data-url-global-pages/css-data-url-global-pages.test.ts (added, +21/-0)
test/e2e/css-data-url-global-pages/next.config.ts (added, +7/-0)
test/e2e/css-data-url-global-pages/pages/index.tsx (added, +5/-0)

Code Example

// pages/index.tsx
import 'data:text/css,#styled{font-weight:700}'

export default function Home() {
  return <div id="styled">This text should be bold</div>
}

---

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

---

Webpack                           Turbopack
App Router    .yak.module.css via !=! → works   data:text/css → works
Pages Router  .yak.module.css via !=! → works   data:text/css → fails

---

Operating System:
  Platform: darwin
  Arch: arm64
Relevant Packages:
  next: 16.2.0-canary (latest canary)
  react: 19.x
  typescript: 5.x

RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/jantimon/next.js/tree/fix/css-data-url-pages-router/test/e2e/css-data-url-global-pages

To Reproduce

Create a pages-only project (no app/ directory)
Import CSS via a data URL from any page:

// pages/index.tsx
import 'data:text/css,#styled{font-weight:700}'

export default function Home() {
  return <div id="styled">This text should be bold</div>
}

next dev --turbopack
Visit /

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

Same import works fine in App Router (fun fact: it also works in mixed app+pages projects -> just pages-only projects are affected)

Current vs. Expected behavior

As data:text/css,... is global CSS the Pages Router restriction kicks in and blocks it (at least outside _app.tsx)

The restriction makes sense for guiding users towards CSS Modules, but nobody writes import 'data:text/css,...' by hand. It's generated by tooling (compilers, loaders) that already handles scoping. At that point the guardrail just gets in the way

Real-world impact: this blocks next-yak on Turbopack + Pages Router. In webpack mode, next-yak emits .yak.module.css via inline resource syntax (!=!), so webpack treats it as a CSS Module. Turbopack doesn't support !=!, so next-yak falls back to data:text/css;base64,..., which hits this restriction

              Webpack                           Turbopack
App Router    .yak.module.css via !=! → works   data:text/css → works
Pages Router  .yak.module.css via !=! → works   data:text/css → fails

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
Relevant Packages:
  next: 16.2.0-canary (latest canary)
  react: 19.x
  typescript: 5.x

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

CSS, Pages Router, Turbopack

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

next dev (local)

Additional context

the fix would be small:

the global CSS validation in crates/next-api/src/module_graph.rs already exempts node_modules imports. same treatment for data URL modules (path filename starts with data:) fixes this

extent analysis

Fix: Allow `data:`‑URL CSS imports in Pages Router (Turbopack)

The guard that blocks global CSS is in crates/next-api/src/module_graph.rs.
It already skips node_modules imports – we just need to add the same exemption for URLs that start with data:.

1. Patch the source

Create a small patch (or edit the file directly if you’re using a fork).

--- a/crates/next-api/src/module_graph.rs
+++ b/crates/next-api/src/module_graph.rs
@@
 fn is_global_css_import(import: &Import) -> bool {
   // Existing check for node_modules
-  if import.path.starts_with("node_modules/") {
+  if import.path.starts_with("node_modules/")
+     // NEW: treat data‑URL imports as external‑like and allow them
+     || import.path.starts_with("data:") {
     return false;
   }
   // …rest of the logic that decides if the import is global CSS
   // (e.g. ends with .css && !ends with .module.css)
   import.path.ends_with(".css") && !import.path.ends_with(".module.css")
 }

What the change does

When the import path begins with data: (e.g. data:text/css,...),

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?

#api #ssr #installation #tensor shape #autograd error #ISR setup #authentication setup #request error #file not found

Still need to ship something?

×6

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

Data

Security

Network

Code

UI/UX

Text

System

Multimedia

Protocol

API

Engineering

nextjs - ✅(Solved) Fix data:text/css imports fail in Pages Router with Turbopack [1 pull requests, 1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89901: exempt data URL CSS from Pages Router global CSS restriction

Description (problem / solution / changelog)

What?

Why?

How?

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

Fix: Allow `data:`‑URL CSS imports in Pages Router (Turbopack)

1. Patch the source

Still need to ship something?

TRENDING

nextjs - ✅(Solved) Fix data:text/css imports fail in Pages Router with Turbopack [1 pull requests, 1 comments, 2 participants]

Recommended Tools

GitHub issue graph ai analysis

Fix Action

Fixed

PR fix notes

PR #89901: exempt data URL CSS from Pages Router global CSS restriction

Description (problem / solution / changelog)

What?

Why?

How?

Changed files

Code Example

Link to the code that reproduces this issue

To Reproduce

Current vs. Expected behavior

Provide environment information

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

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

Additional context

extent analysis

Fix: Allow data:‑URL CSS imports in Pages Router (Turbopack)

1. Patch the source

Still need to ship something?

RELATED_DISCOVERY

TRENDING

Fix: Allow `data:`‑URL CSS imports in Pages Router (Turbopack)