Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix App Router includes unused CSS module in unrelated routes (bundle analyzer + runtime) [1 pull requests, 12 comments, 5 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#89252•Fetched 2026-04-08 02:03:02
View on GitHub
Comments
12
Participants
5
Timeline
33
Reactions
4
Author
t18nt18n
Participants
dev-rohit-guptadev-rohit-guptaJF10RJF10Rrobert-j-webbrobert-j-webbShanmukha27-webShanmukha27-webt18nt18n
Timeline (top)
commented ×12subscribed ×9mentioned ×7labeled ×3

PR fix notes

PR #14: Master

Description (problem / solution / changelog)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

Summary by CodeRabbit

Release Notes

  • New Features

    • Added dedicated opportunities discovery page with search, filtering, and pagination capabilities
    • Introduced enhanced scholarship search interface with detailed result cards and information modals
    • Added global header and footer navigation with responsive mobile menu
    • Improved responsive design across authentication pages

  • Style

    • Updated form layouts for better mobile and desktop experiences with improved spacing and backgrounds
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Changed files

  • package.json (modified, +1/-0)
  • pnpm-lock.yaml (modified, +12/-0)
  • public/ScholarX-Logo-horizontal-Blue-Solid-Small_ScholarX.png (added, +0/-0)
  • public/ScholarX-Logo-vertical-Blue-White-Solid-Small_ScholarX.png (added, +0/-0)
  • public/opportunities-hero-bg.jpg (added, +0/-0)
  • src/app/(platform)/ai-search/page.tsx (removed, +0/-5)
  • src/app/(platform)/opportunities/page.tsx (added, +67/-0)
  • src/app/ai-search/ai-search.css (added, +152/-0)
  • src/app/ai-search/layout.tsx (added, +19/-0)
  • src/app/ai-search/page.tsx (added, +66/-0)
  • src/app/auth/_components/PhoneForm.tsx (modified, +1/-1)
  • src/app/auth/collect-phone/page.tsx (modified, +2/-2)
  • src/app/auth/signin/layout.tsx (added, +14/-0)
  • src/app/auth/signin/page.tsx (modified, +3/-3)
  • src/app/auth/signup/layout.tsx (added, +14/-0)
  • src/app/auth/signup/page.tsx (modified, +4/-4)
  • src/app/auth/verify-email/page.tsx (modified, +2/-2)
  • src/app/globals.css (modified, +12/-3)
  • src/app/layout.tsx (modified, +5/-2)
  • src/components/Footer.tsx (added, +117/-0)
  • src/components/Header.tsx (added, +96/-0)
  • src/components/MobileMenu.tsx (added, +119/-0)
  • src/components/ai-search/bot-avatar.tsx (removed, +0/-48)
  • src/components/ai-search/chat-input.tsx (removed, +0/-60)
  • src/components/ai-search/mock-data.ts (removed, +0/-97)
  • src/components/ai-search/providers.tsx (added, +20/-0)
  • src/components/ai-search/scholarship-card.tsx (added, +129/-0)
  • src/components/ai-search/scholarship-modal.tsx (added, +185/-0)
  • src/components/ai-search/search-hero.tsx (added, +215/-0)
  • src/components/ai-search/search-results.tsx (added, +208/-0)
  • src/components/ai-search/ui/alert-dialog.tsx (added, +199/-0)
  • src/components/ai-search/ui/badge.tsx (added, +49/-0)
  • src/components/ai-search/ui/button.tsx (added, +67/-0)
  • src/components/ai-search/ui/card.tsx (added, +103/-0)
  • src/components/ai-search/ui/combobox.tsx (added, +302/-0)
  • src/components/ai-search/ui/dialog.tsx (added, +164/-0)
  • src/components/ai-search/ui/dropdown-menu.tsx (added, +273/-0)
  • src/components/ai-search/ui/field.tsx (added, +238/-0)
  • src/components/ai-search/ui/input-group.tsx (added, +159/-0)
  • src/components/ai-search/ui/input.tsx (added, +19/-0)
  • src/components/ai-search/ui/label.tsx (added, +24/-0)
  • src/components/ai-search/ui/select.tsx (added, +195/-0)
  • src/components/ai-search/ui/separator.tsx (added, +28/-0)
  • src/components/ai-search/ui/skeleton.tsx (added, +15/-0)
  • src/components/ai-search/ui/textarea.tsx (added, +18/-0)
  • src/components/opportunities/Filters.tsx (added, +175/-0)
  • src/components/opportunities/OpportunitiesSearchInput.tsx (added, +65/-0)
  • src/components/opportunities/OpportunityCard.tsx (added, +114/-0)
  • src/components/opportunities/OpportunityModal.tsx (added, +259/-0)
  • src/components/opportunities/OpprtunitySection.tsx (added, +174/-0)
  • src/components/opportunities/SimpleDropdown.tsx (added, +98/-0)
  • src/components/ui/sheet.tsx (modified, +22/-23)
  • src/config/query-keys.ts (modified, +10/-0)
  • src/hooks/ai-search/use-search.ts (added, +16/-0)
  • src/hooks/queries/useOpportunitiesSearch.ts (added, +15/-0)
  • src/lib/ai-search/api.ts (added, +123/-0)
  • src/lib/ai-search/types.ts (added, +62/-0)
  • src/lib/ai-search/utils.ts (added, +6/-0)
  • src/lib/api/index.ts (modified, +1/-0)
  • src/lib/api/opportunities.service.ts (added, +92/-0)
  • src/lib/dal.ts (modified, +9/-3)
  • src/lib/opportunities/colors.ts (added, +58/-0)
  • src/lib/opportunities/types.ts (added, +163/-0)
  • src/lib/utils.ts (modified, +3/-3)
  • src/providers/opportunities-search-provider.tsx (added, +81/-0)

Code Example

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

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.

extent analysis

TL;DR

Review and adjust the CSS loading strategy in Next.js to prevent unnecessary loading of CSS files like Button.module.scss on unrelated routes.

Guidance

  • Investigate the use of next/dynamic or loadable-components to dynamically import components and their associated CSS files, reducing unnecessary loads.
  • Verify the current implementation of CSS modules and their imports in the project to ensure they are not being imported globally or unnecessarily.
  • Check the next.config.js file for any configurations that might be causing the unnecessary loading of CSS files, such as incorrect settings for experimental.cssModules or compilerOptions.
  • Consider using a more granular approach to loading CSS, such as using a library like classnames to conditionally apply CSS classes based on the current route or component state.

Example

No specific code example is provided due to the complexity of the issue and the need for a tailored solution based on the project's specific configuration and requirements.

Notes

The provided environment information and reproduction steps suggest that the issue is related to the way Next.js handles CSS modules and dynamic imports. However, without more specific details about the project's configuration and codebase, it's challenging to provide a precise solution.

Recommendation

Apply a workaround by reviewing and adjusting the CSS loading strategy, as the root cause seems to be related to how CSS files are being loaded and managed within the Next.js application. This approach allows for a more targeted fix without requiring an upgrade to a potentially non-existent fixed version.

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…
#vector store#embedding generation#cache error#pipeline error#runtime 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

nextjs - ✅(Solved) Fix App Router includes unused CSS module in unrelated routes (bundle analyzer + runtime) [1 pull requests, 12 comments, 5 participants]