vercel / vercel/next.js

App Router includes unused CSS module in unrelated routes (bundle analyzer + runtime)

Open
#89,252 12 comments 4 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

CSS Turbopack Webpack
Dominant language
JavaScript
Stars
142k
Forks
32.5k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://github.com/t18n/next-js-app-router-css-bundle-repro/tree/main

To Reproduce
  1. pnpm install
    2.pnpm build:analyzer
  2. Open http://localhost:4000/ and check the analyzer output for dashboard and dashboard/users
  3. Note Button.module.scss is included and loaded on those routes
Current vs. Expected behavior
  • Expected: Button.module.scss only loads on home and not-found routes where Button is used.

  • Actual: Button.module.scss is included and loaded for dashboard and dashboard/users, and blocks render.

Provide environment information
Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 25.2.0: Tue Nov 18 21:09:40 PST 2025; root:xnu-12377.61.12~1/RELEASE_ARM64_T6000
  Available memory (MB): 32768
  Available CPU cores: 10
Binaries:
  Node: 24.6.0
  npm: 11.5.1
  Yarn: 1.22.22
  pnpm: 10.24.0
Relevant Packages:
  next: 16.1.6 // Latest available version is detected (16.1.6).
  eslint-config-next: N/A
  react: 19.2.3
  react-dom: 19.2.3
  typescript: 5.9.3
Next.js Config:
  output: N/A
Which area(s) are affected? (Select all that apply)

CSS, Turbopack

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

next build (local), Other (Deployed), next start (local)

Additional context
  • Repro is local and also impacts production (CSS loads on unrelated routes and blocks render).
  • On a larger project with 100+ components this adds ~11s blocking time on Lighthouse/CWV.

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: run pnpm install and pnpm build:analyzer, then inspect the analyzer output for /, /dashboard, and /dashboard/users. Trace why Button.module.scss is included outside the home and not-found routes; done means it loads only where Button is used and no longer blocks unrelated routes.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript, nextjs, react
Domain
build-system, frontend, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.