Fix: Module not found: Can't resolve 'fs' in Next.js - Quick Solutions

The ‘Module not found: Can’t resolve fs’ error occurs when trying to use Node.js server-side APIs like fs in client-side Next.js code. The fs module is only available in Node.js environments, not in browsers.

---

Common Causes and Fixes

1. Direct fs Import in Client Code

// ❌ Error: Using fs in client-side code
import fs from 'fs';
const data = fs.readFileSync('file.txt', 'utf8');  // Error!

// ✅ Fixed: Use API routes for file operations
// pages/api/read-file.js
export default async function handler(req, res) {
  const fs = require('fs');
  const path = require('path');
  const data = fs.readFileSync(path.join(process.cwd(), 'public/file.txt'), 'utf8');
  res.status(200).json({ data });
}

2. Server-Only Code in Client Components

// ❌ Error: Server code in client component
import { promises as fs } from 'fs';
import path from 'path';

const Component = () => {
  const data = fs.readFile(path.join(process.cwd(), 'data.json'));  // Error!
  return <div>{data}</div>;
};

// ✅ Fixed: Use client-side data fetching
import { useState, useEffect } from 'react';

const Component = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data').then(res => res.json()).then(setData);
  }, []);

  return <div>{data}</div>;
};

3. Incorrect Dynamic Import

// ❌ Error: Still importing fs in client
import('fs').then(fs => {
  // Client-side usage - Error!
});

// ✅ Fixed: Dynamic import with server check
const serverFunction = async () => {
  if (typeof window === 'undefined') {
    const fs = await import('fs');
    return fs.readFileSync('file.txt', 'utf8');
  }
  return null;
};

4. Webpack Configuration Issue

// ❌ Error: Wrong webpack config
// next.config.js
module.exports = {
  webpack: (config) => {
    config.resolve.fallback = {
      fs: false  // This removes fs but may break server code
    };
    return config;
  }
};

// ✅ Fixed: Conditional fallback
// next.config.js
module.exports = {
  webpack: (config, { isServer }) => {
    if (!isServer) {
      config.resolve.fallback = {
        ...config.resolve.fallback,
        fs: false,
        net: false,
        tls: false
      };
    }
    return config;
  }
};

5. Third-Party Library Issues

// ❌ Error: Library uses fs internally
import problematicLibrary from 'library-that-uses-fs';  // Error!

// ✅ Fixed: Dynamic import with SSR disabled
import { useState, useEffect } from 'react';
import dynamic from 'next/dynamic';

const SafeLibraryComponent = dynamic(
  () => import('../components/LibraryComponent'),
  { ssr: false }
);

6. Environment-Specific Code

// ❌ Error: No environment check
const data = require('fs').readFileSync('config.json');

// ✅ Fixed: Server-only execution
const getData = () => {
  if (typeof window === 'undefined') {
    const fs = require('fs');
    return fs.readFileSync('config.json', 'utf8');
  }
  return null;
};

---

Quick Fixes Summary

1. Move fs operations to API routes
2. Use typeof window === 'undefined' checks
3. Configure webpack fallbacks conditionally
4. Use dynamic imports with { ssr: false }
5. Fetch data via API routes instead of direct file access

Remember: fs module only works server-side. Use API routes for file operations.