vercel / vercel/next.js

Next 16 - pages router - importing components library

Open
#87,727 5 comments 3 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Turbopack Webpack
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/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

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 with the linked reproduction repository, run pnpm install, then cd apps/next16-pagesrouter/ and pnpm dev. Compare the pages-router behavior across the reported Next.js versions and both Turbopack and Webpack, focusing on the component library's CSS import. Done means the package CSS works in pages-router Next 16 during dev, build, and start without the global-CSS error or mismatched class names.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, nextjs, react, webpack
Domain
build-system, frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.