[Solved] Module not found: Can't resolve 'fs' in NextJS

Are You Facing the Following error Module not found: Can’t resolve ‘fs’ in NextJS? Then You are in right place. In this article, we will try to figure out how this error occurs and what are the possible fixes for this error. First of all, let’s explore how this error occurs.

Contents

What is Module not found: Can't resolve 'fs' in NextJS error?
How To Fix Module not found: Can't resolve 'fs' in NextJS Error?
Solution 1: For webpack4
Solution 2: For webpack5
Solution 3: For Webpack > 5
Solution 4: Just add {node:'empty'}
Conclusion

What is Module not found: Can’t resolve ‘fs’ in NextJS error?

I am facing fs not found an error in my nextjs project.

Module not found: Can't resolve 'fs'

How To Fix Module not found: Can’t resolve ‘fs’ in NextJS Error?

How To Fix Module not found: Can’t resolve ‘fs’ in NextJS Error?
To Fix Module not found: Can’t resolve ‘fs’ in NextJS Error If You are using webpack5 with nextjs then you may need to create next.config.js and add the following content to it. Now, your error will be solved.
Module not found: Can’t resolve ‘fs’ in NextJS
To Fix Module not found: Can’t resolve ‘fs’ in NextJS Error You need to create next.config.js file and then add the following config.node = { fs: ’empty’ } And now, Run your nextjs app again and your error will be solved. Thanks.

Solution 1: For webpack4

To Fix Module not found: Can’t resolve ‘fs’ in NextJS Error You need to create next.config.js file and then add the following config.node = { fs: ’empty’ } just like this.

module.exports = {
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
}

And now, Run your nextjs app again and your error will be solved. Thanks.

Solution 2: For webpack5

If You are using webpack5 with nextjs then you may need to create next.config.js and add the following content to it. Just like this.

module.exports = {
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

Now, your error will be solved.

Solution 3: For Webpack > 5

For Webpack > 5 update webpack.config.js

module.exports = {
    ...
    resolve: {
        fallback: {
            "fs": false
        },
    }
}

Solution 4: Just add {node:’empty’}

Just add {node:’empty’} to your webpack.config file.

Conclusion

It’s all About this error. I hope We Have solved Your error. Comment below Your thoughts and your queries. Also, Comment below on which solution worked for you.

Also, Read

[Solved] Module not found: Can’t resolve ‘fs’ in NextJS