Bug Fix·Pushed May 1, 2026·S
Client bundle no longer pulls in Node.js fs modules
A Turbopack build error is resolved by separating filesystem operations from client-safe utilities. Client components can now import from the stories module without triggering Node.js module errors.
The build was failing with a Turbopack error: "chunking context does not support external modules." The culprit was a client component importing from the stories module, which pulled Node.js filesystem operations into the client bundle.
Server-only filesystem code has been extracted into a dedicated module. The two loader functions — one that reads story JSON files from disk and another that finds a specific story by ID — now live in their own file marked for server use only. Pure types and helper functions remain in the original module, safe for client components.
The two page files that needed the loaders now import from the new server-only module instead. Any client component can continue using the original stories module without accidentally bundling Node.js dependencies. The module boundary is now explicit, and the build passes cleanly.
Technical description
A Turbopack build error prompted a module boundary fix. The [[code]]HousekeepingDrawer[[/code]] client component imported [[code ref=2]]stories.ts[[/code]], which transitively included [[code]]node:fs[[/code]] and [[code]]node:path[[/code]]. Turbopack cannot include external Node.js modules in client bundles, causing the build to fail.
The fix creates a new server-only module. [[code ref=1]]stories-loader.ts[[/code]] is introduced with a comment explicitly warning against client imports. It exports [[code]]loadStories[[/code]] and [[code]]loadStory[[/code]] — the two functions that call [[code]]readdirSync[[/code]] and [[code]]readFileSync[[/code]]. These functions are removed from [[code]]stories.ts[[/code]], which now contains only types and pure helper functions like [[code]]groupByDay[[/code]], [[code]]primaryCategory[[/code]], and [[code]]categoryDisplayName[[/code]].
The two page files are updated to import the loaders from the new module: [[code ref=3]]page.tsx[[/code]] and [[code ref=4]]stories/[id]/page.tsx[[/code]]. Both are server components that can safely use server-only modules.
````mermaid
file=site/src/lib/stories-loader.ts
graph LR
A["HousekeepingDrawer (client)"] -->|imports| B["stories.ts (safe)"]
C["page.tsx (server)"] -->|imports| B
C -->|imports| D["stories-loader.ts (server-only)"]
D -->|uses| E["node:fs"]
````
Files at a glance:
- [[code]]site/src/lib/stories-loader.ts[[/code]] — new file with server-only filesystem loaders
- [[code]]site/src/lib/stories.ts[[/code]] — refactored to pure types and helpers
- [[code]]site/src/app/page.tsx[[/code]] — updated loader import
- [[code]]site/src/app/stories/[id]/page.tsx[[/code]] — updated loader import
Categories
- Bug Fix (70%) — Fixes a Turbopack build error where client components were pulling Node.js fs modules into the client bundle
- Refactoring (25%) — Restructures code by separating server-only filesystem operations into a dedicated module
- Maintenance (5%) — Adds clarifying comments and enforces proper module boundaries