Bug Fix·Pushed May 1, 2026·S

Server-side file ops separated from client bundle

A client component was accidentally importing Node.js filesystem modules, breaking the Turbopack build. File operations have been isolated into a server-only module.

A client component with a 'use client' directive was importing the stories utility module, which pulled in node:fs dependencies. Turbopack failed with "chunking context does not support external modules" — a clear signal that server-only code was leaking into the client bundle. The fix separates concerns cleanly. A new server-only module now contains the filesystem-based loaders, while the original module retains only types and pure functions safe for client use. Both story pages have been updated to import from the appropriate module. The site should now build successfully in Turbopack, with client components never touching filesystem APIs.

Technical description

This fix resolves a Turbopack bundling error caused by server-only code crossing into the client bundle. **The Problem** A client component called [[code ref=1]]HousekeepingDrawer[[/code]] had a [[code]]'use client'[[/code]] directive, yet it imported from [[code ref=2]]@/lib/stories[[/code]]. That module depended on [[code]]node:fs[[/code]], a Node.js API unavailable in browser contexts. Turbopack rejected this with "chunking context does not support external modules". **The Solution** The stories module was split into two: 1. **[[code ref=1]]stories-loader.ts[[/code]]** — Contains [[code]]loadStories()[[/code]] and [[code]]loadStory()[[/code]], which read JSON files from disk using [[code]]readdirSync[[/code]] and [[code]]readFileSync[[/code]]. This module is server-only, with a comment warning against client imports. 2. **[[code ref=2]]stories.ts[[/code]]** — Retains the [[code]]StoryKind[[/code]] type, [[code]]primaryCategory()[[/code]], [[code]]categoryDisplayName()[[/code]], and other pure helpers safe for client use. A comment marks it as "client-safe". Two page components were updated to import from the correct module: - [[code ref=3]]page.tsx[[/code]] now imports [[code]]loadStories[[/code]] from [[code]]@/lib/stories-loader[[/code]] - [[code ref=4]]stories/[id]/page.tsx[[/code]] now imports both [[code]]loadStories[[/code]] and [[code]]loadStory[[/code]] from [[code]]@/lib/stories-loader[[/code]] ````mermaid file=site/src/lib/stories-loader.ts graph TD A["page.tsx<br/>stories/[id]/page.tsx"] --> B["stories-loader.ts<br/>(server-only)"] A --> C["stories.ts<br/>(client-safe)"] B --> D["node:fs"] C --> E["pure types/helpers"] ```` **Files at a Glance** - [[code]]site/src/lib/stories-loader.ts[[/code]] — New server-only module with filesystem loaders - [[code]]site/src/lib/stories.ts[[/code]] — Updated to retain only client-safe exports - [[code]]site/src/app/page.tsx[[/code]] — Updated import path - [[code]]site/src/app/stories/[id]/page.tsx[[/code]] — Updated import paths