{"id":34524728,"url":"https://github.com/pferreirafabricio/nextjs-bug-css-modules","last_synced_at":"2026-04-11T09:01:19.985Z","repository":{"id":327438699,"uuid":"1109321688","full_name":"pferreirafabricio/nextjs-bug-css-modules","owner":"pferreirafabricio","description":"🪲 Repository to demonstrate a issue with Next.js and dynamic import of SSR components","archived":false,"fork":false,"pushed_at":"2025-12-03T20:53:14.000Z","size":139,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-12-06T21:32:43.856Z","etag":null,"topics":["css","css-modules","nextjs","nextjs16"],"latest_commit_sha":null,"homepage":"https://github.com/vercel/next.js/issues/86777","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pferreirafabricio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-03T16:35:40.000Z","updated_at":"2025-12-03T17:53:24.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/pferreirafabricio/nextjs-bug-css-modules","commit_stats":null,"previous_names":["pferreirafabricio/nextjs-bug-css-modules"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/pferreirafabricio/nextjs-bug-css-modules","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pferreirafabricio%2Fnextjs-bug-css-modules","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pferreirafabricio%2Fnextjs-bug-css-modules/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pferreirafabricio%2Fnextjs-bug-css-modules/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pferreirafabricio%2Fnextjs-bug-css-modules/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pferreirafabricio","download_url":"https://codeload.github.com/pferreirafabricio/nextjs-bug-css-modules/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pferreirafabricio%2Fnextjs-bug-css-modules/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27995843,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-12-24T02:00:07.193Z","response_time":83,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-modules","nextjs","nextjs16"],"created_at":"2025-12-24T05:05:58.097Z","updated_at":"2025-12-24T05:06:35.371Z","avatar_url":"https://github.com/pferreirafabricio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Next.js CSS Modules Bug Reproduction\n\nThis repository demonstrates a bug in Next.js where dynamically imported SSR components cause all CSS modules to be loaded on every page, regardless of which components are actually used.\n\n## 🐛 Issue\n\n**Related GitHub Issue:** [#86777 - Dynamic import of SSR components is causing the CSS of all components being loaded](https://github.com/vercel/next.js/issues/86777)\n\n### The Problem\n\nWhen using `dynamic()` imports with server-side rendered components that use CSS Modules, Next.js loads the CSS for **all** dynamically importable components on every page, even if only one component is actually used on that page.\n\nThis defeats the purpose of code splitting and significantly increases page load times in production.\n\n### Expected Behavior\n\nOnly the CSS modules for components actually used on a page should be loaded.\n\n### Current Behavior\n\n- **Development Mode**: Some CSS is correctly split, but unnecessary CSS modules are still loaded\n- **Production Build**: All CSS modules for all dynamically importable components are bundled together and loaded on every page\n\n## 📁 Project Structure\n\n```\ncomponents/\n├── Button.tsx + Button.module.css\n├── Card.tsx + Card.module.css\n├── Link.tsx + Link.module.css\n├── List.tsx + List.module.css\n└── DynamicComponent.tsx (dynamic import wrapper)\n\napp/\n├── products/[id]/page.tsx (uses only Button via dynamic import)\n└── blog/[slug]/page.tsx (uses only Link via static import)\n```\n\n## 🔍 How to Reproduce\n\n### Prerequisites\n\n```bash\nnpm install\n```\n\n### Option 1: Development Mode\n\n1. Start the dev server:\n\n   ```bash\n   npm run dev\n   ```\n\n2. Open [http://localhost:3000/products/1](http://localhost:3000/products/1)\n   - **Issue**: CSS for Button, Card, Link, and List are all loaded\n   - **Expected**: Only Button CSS should be loaded\n\n3. Open [http://localhost:3000/blog/1](http://localhost:3000/blog/1)\n   - **Result**: Only Link CSS is loaded (correct behavior with static import)\n\n### Option 2: Production Build\n\n1. Build the application:\n\n   ```bash\n   npm run build\n   ```\n\n2. Start the production server:\n\n   ```bash\n   npm run start\n   ```\n\n3. Open both routes and inspect the CSS files loaded\n   - **Issue**: All CSS modules are bundled together in both pages\n\n## 🔬 Investigation Details\n\n### Components\n\n- **Button**: Used in `app/products/[id]/page.tsx` via `DynamicComponent`\n- **Card**: NOT used anywhere\n- **Link**: Used in `app/blog/[slug]/page.tsx` via static import\n- **List**: NOT used anywhere\n\n### Dynamic Import Implementation\n\nThe `DynamicComponent.tsx` file uses Next.js's `dynamic()` function to load components:\n\n```tsx\nconst componentMap: Record\u003cstring, () =\u003e Promise\u003cany\u003e\u003e = {\n  card: () =\u003e import('@/components/Card'),\n  button: () =\u003e import('@/components/Button'),\n  link: () =\u003e import('@/components/Link'),\n  list: () =\u003e import('@/components/List'),\n};\n\nconst Component = dynamic(componentMap[type], {\n  loading: () =\u003e \u003cdiv\u003eLoading {type}...\u003c/div\u003e,\n});\n```\n\n### What We've Tried\n\n- ✗ Using switch statements instead of object mapping\n- ✗ Separating client and server registries\n- ✗ Direct imports with conditional rendering\n- ✗ Different dynamic import configurations\n\n**All approaches result in the same CSS bundling behavior.**\n\n## 🎯 Use Case\n\nThis pattern is common in CMS-driven applications where:\n\n- Page structure is defined dynamically\n- Components are loaded based on CMS configuration\n- Each page should only load the CSS/JS for components it actually uses\n\n## 🛠️ Tech Stack\n\n- **Next.js**: 16.0.6 (App Router)\n- **React**: 19.2.0\n- **TypeScript**: 5.9.3\n- **Tailwind CSS**: 3.4.18\n- **CSS Modules**: Native Next.js support\n- **Bundler**: Turbopack\n\n## 📊 Environment\n\n- **OS**: Windows 11 Pro\n- **Node**: 22.14.0\n- **npm**: 10.9.2\n\n## 🔗 Related Discussions\n\n- [Reddit: Problem with app router no-one is talking about - Dynamic Loading](https://www.reddit.com/r/nextjs/comments/1omk5vp/problem_with_app_router_noone_is_talking_about/)\n\n## 📝 License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpferreirafabricio%2Fnextjs-bug-css-modules","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpferreirafabricio%2Fnextjs-bug-css-modules","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpferreirafabricio%2Fnextjs-bug-css-modules/lists"}