Issue Station
Sign In
Tools hereToolbox

nextjs - 💡(How to fix) Fix Next 16 - pages router - importing components library [5 comments, 4 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#87727•Fetched 2026-04-08 02:06:20
View on GitHub
Comments
5
Participants
4
Timeline
11
Reactions
3
Author
morriqmorriq
Participants
aldoprogrammeraldoprogrammermatthew-heathmatthew-heathmischnicmischnicmorriqmorriq
Timeline (top)
commented ×5subscribed ×3labeled ×2issue_type_added ×1

Root Cause

Should i use names such Badge.module.css? If so - how I'm supposed to force webpack/turbopack in next config to keep my classnames as it is? Because right now it changes _badge_1u41m_1 to Badge__badge_1u41m_1__1QdDY but it does not update js files

Code Example

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

---

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:56 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 12
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: 10.24.0
Relevant Packages:
  next: 16.1.1 // Latest available version is detected (16.1.1).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: N/A
Next.js Config:
  output: N/A
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/morriq/next16-pagesrouter-issue-87727

To Reproduce

pnpm install

cd apps/next16-pagesrouter/

pnpm dev

  1. Open browser and you will see:
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).

Current vs. Expected behavior

I know Turbopack is now the default and that I can switch to Webpack, but I’d still like to report this issue.

Importing css from packages works with pages router next 15, app router 15, 16 and I expect it will work on pages router 16.

If there’s a better or recommended way to handle this, please let me know.

Should i use names such Badge.module.css? If so - how I'm supposed to force webpack/turbopack in next config to keep my classnames as it is? Because right now it changes _badge_1u41m_1 to Badge__badge_1u41m_1__1QdDY but it does not update js files

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:56 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6041
  Available memory (MB): 24576
  Available CPU cores: 12
Binaries:
  Node: 24.12.0
  npm: 11.6.2
  Yarn: N/A
  pnpm: 10.24.0
Relevant Packages:
  next: 16.1.1 // Latest available version is detected (16.1.1).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: N/A
Next.js Config:
  output: N/A

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

Turbopack, Webpack

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

next dev (local), next build (local), next start (local)

Additional context

No response

extent analysis

TL;DR

To resolve the issue with global CSS imports in Next.js 16, consider converting imports to Component-Level CSS (CSS Modules) or moving them to pages/_app.js.

Guidance

  • Verify that the issue is specific to Turbopack by switching to Webpack and checking if the problem persists.
  • Explore using CSS Modules by renaming files to .module.css (e.g., Badge.module.css) to avoid global CSS conflicts.
  • Investigate Next.js configuration options to customize CSS handling, such as cssLoader or cssModules, to maintain desired class names.
  • Check the official Next.js documentation for recommendations on handling global CSS imports in version 16.

Example

No specific code example is provided due to the lack of detailed code context in the issue.

Notes

The issue seems to be related to changes in Next.js 16, specifically with Turbopack. The solution may involve adapting to these changes by using CSS Modules or adjusting the Next.js configuration.

Recommendation

Apply workaround: Convert imports to Component-Level CSS (CSS Modules) to avoid conflicts and ensure compatibility with Next.js 16. This approach allows for more control over CSS scope and avoids potential issues with global styles.

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…
#api#ssr#installation#tensor shape#request timeout

Still need to ship something?

×6

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

Back to top recommendations

TRENDING