Fix Next.js 'Module not found: Can't resolve 'fs'' (and 'path', 'child_process', 'net')
Keep Node.js-only modules out of Client Components with 'server-only', Server Actions, or Route Handlers instead of webpack fallbacks.
Module not found: Can't resolve 'fs' Import trace for requested module: ./src/lib/read-config.ts ./src/components/settings-panel.tsx
// 1. Mark the module that uses 'fs' as server-only import "server-only"; import * as nodeModule from "node:fs"; // 2. Call it from a Server Component, Route Handler, or Server Action // and pass the serializable result to your "use client" component as props. // 3. Find the client file that pulls it in - read the "Import trace" lines // in the build error from bottom (client component) to top (the 'fs' user).
Root Cause & Mechanism Analysis
Why does this error occur?
A file imported (directly or transitively) by a `"use client"` component uses a Node.js built-in like `fs`, `path`, or `child_process`. Browser bundles cannot include Node.js APIs, so the bundler fails to resolve them.
Frequently Asked Questions
Should I add resolve.fallback { fs: false } to next.config?
Need Zero-Knowledge .env Secret Sync Across Your Engineering Team?
Explore Castov Env Vault for client-side AES-256-GCM encrypted environment sharing, or sponsor this engineering hub.
Related Developer Error Solutions
Browse All 69 GuidesNext.js: Functions cannot be passed directly to Client Components
Resolve React Server Component serialization errors when passing callbacks or non-serializable classes across the Server-Client boundary.
Next.js Hydration Failed
Resolve Next.js React hydration mismatch errors caused by browser-only APIs (window, localStorage), timestamps, or invalid HTML nesting.
Next.js: Dynamic server usage
Understand static vs dynamic rendering when accessing headers(), cookies(), or searchParams.