Next.js Error: Module not found: Can’t resolve ‘fs’

Understanding the ‘fs’ Module Error in Next.js

When developing projects in Next.js, developers can sometimes face an error stating ‘Module not found: Can’t resolve ‘fs”. This error occurs because ‘fs’, or File System, is a Node.js module used for file operations which can only be used server-side. In a Next.js application, when you try to use ‘fs’ on the client-side—in components that render in the browser—Next.js will throw an error because browser environments do not have access to Node.js modules for security reasons.

Fixing the Error: Server-Side Usage

The first approach to fixing this error is ensuring ‘fs’ is used exclusively in server-side code. Next.js uses file-based routing, and any file inside the ‘pages’ directory is meant for the client-side by default. Therefore, you should not import ‘fs’ directly within these files. Instead, you can use ‘fs’ in API routes which are server-side by design. API routes in Next.js are stored in the ‘pages/api’ directory. Here is an example of how ‘fs’ should be used within an API route:

import { promises as fs } from 'fs';

export default async function handler(req, res) {
    const data = await fs.readFile('/path/to/your/file.txt', 'utf8');
    res.status(200).json({ content: data });
}

Fixing the Error: Dynamic Imports

Another method to fix the error is using dynamic imports with ‘next/dynamic’. This ensures that ‘fs’ is only included in server-side bundles. This method is suitable when you need conditional server-side logic in your components. Here’s how you can use dynamic imports:

import dynamic from 'next/dynamic';
import React from 'react';

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

function MyPage() {
    return (/*...*/);
}

export default MyPage;

Note that in the above example, ‘ComponentUsingFs’ should wrap the usage of ‘fs’ in server-side code. It means that in ‘ComponentUsingFs’, you would use ‘getServerSideProps’ or ‘getInitialProps’ which are Next.js functions running on the server side to work with the file system.

Fixing the Error: Conditional Import Using Environment Variables

An alternative for importing ‘fs’ is to do it conditionally, based on whether the code is running on server or client-side. This can be done using environment variables provided by Next.js, such as ‘NEXT_PUBLIC_’ prefixed variables or checking the ‘window’ object.

let fs;

if (typeof window === 'undefined') {
  fs = require('fs');
}

function MyComponent() {
    let fileContent;
    if (fs) {
        fileContent = fs.readFileSync('/path/to/file', 'utf8');
    }
    return (
        {fileContent}
    );
}

export default MyComponent;

In this scenario, the ‘fs’ module will only be loaded on the server-side. However, still keep in mind that any direct use of ‘fs’ inside components will not be part of the static build served to clients and will only work for server-side rendering paths or API routes.