How can we solve Turbopack build errors related to filesystem modules like fs in Client Components?

Turbopack build errors with fs in Client Components happen because filesystem modules like fs are Node.js-only and can't bundle for browsers unlike webpack, Turbopack is stricter about tree-shaking them out.

Move any fs usage to Server Components, Route Handlers, or API routes since Client Components ("use client") run in browsers without Node.js APIs. If a third-party library imports fs and leaks it to client bundles, create a separate server-only wrapper or use dynamic imports with { ssr: false } to isolate it. For Turbopack-specific cases, add serverExternal: ['fs'] in next.config.ts to explicitly exclude it from client bundles during builds.

Code

// next.config.ts
export default {
  experimental: {
    turbo: {
      rules: {
        serverExternal: ['fs']
      }
    }
  }
}



// app/api/files/route.ts
import fs from 'fs'
import { NextResponse } from 'next/server'

export async function GET() {
  const data = fs.readFileSync('data.json', 'utf8')
  return NextResponse.json({ data })
}


// Client Component
'use client'
export default function Client() {
  const [data, setData] = useState('')
  
  const loadFile = async () => {
    const res = await fetch('/api/files')
    setData((await res.json()).data)
  }
  return <button onClick={loadFile}>Load File</button>
}