How to Resolve the Module not found: Can’t resolve 'fs' error in Next.js and WebPack

Table of Content

• What is Module not found: Can't resolve 'fs' error in Next.js
• Why do you get Module not found: Can't resolve 'fs' error in Next.js
• How to Solve the Module not found: Can't resolve 'fs' error in Next.js and Webpack 4
• How to Solve the Module not found: Can't resolve 'fs' error in Next.js and Webpack 5
• How to Solve the Module not found: Can't resolve 'fs' error in Next.js Page
• Wrap Off

When you work with Next.js, you may run into the issue of

Module not found: Can't resolve 'fs'.

Next.js allows you to import methods from a file that loads Node.js modules in the pages component.

This is completely acceptable, however, you should also use the method you imported from Node.js in Next.js getStaticProps() or getServerSideProps().

Read more: Next.js Data Fetching: Everything to Know About CSR, SSR, SSG, and ISR

What is Module not found: Can't resolve 'fs' error in Next.js

The Module not found: Can't resolve 'fs' in Next.js error occurs when you import a Node.js module that is available on the server-side, but that is not available in the browser.

The file system module is a prime example of this.

When you call a server-side module, the dependencies, you need to make sure it is available at the browser as well.

Why do you get Module not found: Can't resolve 'fs' error in Next.js

You get the Module not found: Can't resolve 'fs' error in Next.js because Next.js runs everything in the getStaticProps().

Since Node.js modules are server-side, when you run your code in a server environment and do not invoke the Node.js function in there, Next.js can't know that.

For Example, take this code block:

import { getSudents } from '../lib/data'

//...

export async function getStaticProps() {
  return {
    props: {
      data,
    },
  }
}

This code will easily throw the Module not found: Can't resolve 'fs' error in Next.js because the imported function is not available at the browser.

How to Solve the Module not found: Can't resolve 'fs' error in Next.js and Webpack 4

To resolve the error with Webpack 4, you need to tell webpack to set the module to 'empty' on the client-side (!isServer).

This is also a solution when you are working with older Next.js versions.

The configuration essentially tells Webpack to create an empty module for fs, which effectively suppresses the error.

Update your Next.js config file (/next.config.js) with the following:

module.exports = {
    webpack: (config, { isServer }) => {
        if (!isServer) {
            // set 'fs' to an empty module on the client to prevent this error on build --> Error: Can't resolve 'fs'
            config.node = {
                fs: 'empty'
            }
        }

        return config;
    }
}

Read more: What is Next.js On-demand Incremental Static Regeneration and How to Use it?

How to Solve the Module not found: Can't resolve 'fs' error in Next.js and Webpack 5

To resolve the error with Webpack 5, you need to tell webpack not to resolve the module on the client-side (!isServer).

Update your Next.js config file (/next.config.js) with the following:

module.exports = {
    webpack: (config, { isServer }) => {
        if (!isServer) {
            // don't resolve 'fs' module on the client to prevent this error on build --> Error: Can't resolve 'fs'
            config.resolve.fallback = {
                fs: false
            }
        }

        return config;
    }
}

Note: for other modules such as path, you can add multiple arguments such as

{
  fs: false,
  path: false
}

Read more: Next.js CSR, SSR, SSG, and ISR: How to Select a Data Fetching Method

How to Solve the Module not found: Can't resolve 'fs' error in Next.js Page

To fix the error in Next.js, make the imported Node.js module available on the browser by calling it within the Next.js getStaticProps() or getServerSideProps().

In our code example above, add const data = getData(), to the code.

import { getSudents } from '../lib/data'

//...

export async function getStaticProps() {
  const data = getData();
  return {
    props: {
      data,
    },
  }
}

Wrap Off

The Module not found: Can't resolve 'fs' in Next.js error occurs when you import a Node.js module that is not available in the browser.

To resolve it, make the imported Node.js module available on the browser by calling it within the Next.js getStaticProps() or getServerSideProps().

You might get this error with any other Node library you import.

If you learned from this tutorial or it helped you in any way, please consider sharing and subscribing to our newsletter.