How to Resolve the "Module not found: Can't resolve 'fs'" Error in JavaScript

The Module not found: Error: Can't resolve 'fs' is a common error in modern JavaScript projects, especially those using Webpack 5+. It occurs when a piece of your client-side code (which runs in the browser) tries to import the fs module, a core module that is only available in the Node.js environment.

This guide will explain the fundamental reason this error happens and show you the correct way to solve it by configuring Webpack to handle this Node.js-specific dependency.

The Core Problem: fs Does Not Exist in the Browser

The fs module is the File System module in Node.js. It provides functions to read and write files on the server's hard drive (e.g., fs.readFileSync()). For obvious security reasons, JavaScript code running in a web browser is sandboxed and is not allowed to access the user's local file system in this way.

The Can't resolve 'fs' error is Webpack telling you: "A library you are using has a line of code like const fs = require('fs');, but I can't bundle this module because there is no browser equivalent for it."

This error became widespread with the release of Webpack 5, which removed the automatic polyfills for Node.js core modules. A "polyfill" is a browser-friendly substitute for a native Node.js module. Before Webpack 5, an empty substitute was often provided automatically; now, you must configure it explicitly.

Solution: Configuring Webpack's resolve.fallback

The correct way to handle this is to tell Webpack what to do when it encounters an import for the fs module. In almost all cases, the frontend code doesn't actually need the file system functionality; it's often an optional dependency of a library that has both Node.js and browser environments.

The solution is to instruct Webpack to substitute fs with an empty module.

How to Apply the Solution

The implementation depends on your project's setup.

In a Custom webpack.config.js

If you have direct access to your webpack.config.js file, add or modify the resolve.fallback property.

Solution:

// webpack.config.js
module.exports = {
  // ... other configurations
  resolve: {
    fallback: {
      "fs": false, // Tells Webpack to replace `fs` with an empty module.
      // You can add other Node.js core modules here if needed.
      // "tls": false,
      // "net": false,
    }
  },
  // ... other configurations
};

In a Create React App Project (without ejecting)

Create React App (CRA) hides its Webpack configuration. To modify it without running the irreversible eject command, you can use a tool like react-app-rewired and customize-cra.

1. Install the packages:

   npm install react-app-rewired customize-cra --save-dev

2. Update package.json scripts:

   "scripts": {
     "start": "react-app-rewired start",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test"
   }

3. Create config-overrides.js: In the root of your project, create a config-overrides.js file.

   config-overrides.js:

   const { override } = require('customize-cra');
   
   module.exports = override(
     (config) => {
       config.resolve.fallback = {
         ...config.resolve.fallback, // Spread existing fallbacks
         "fs": false,
       };
       return config;
     }
   );

In a Next.js Project

The fs module can only be used in server-side code in Next.js (e.g., inside getServerSideProps or getStaticProps). If you import it at the top level of a component that also runs in the browser, you will get this error.

An example of error:

import fs from 'fs'; // This line causes the error if used in a browser component

function MyComponent() {
  // ...
}

Solution: if you do not intend to use fs on the client side, you can configure the Webpack fallback in your next.config.js file.

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack: (config) => {
    // This helps Webpack resolve named exports from CommonJS modules
    config.resolve.fallback = {
      ...config.resolve.fallback,
      fs: false, // Tells Webpack to replace `fs` with an empty module for the browser.
    };
    return config;
  },
};

module.exports = nextConfig;

note

This ensures that any client-side bundle will not try to include the fs module, resolving the error.

Conclusion

The Module not found: Can't resolve 'fs' error is a clear sign that a Node.js-specific module is being improperly included in a browser-side code bundle.

• The root cause is that the fs module does not exist in browsers.
• The correct solution is to configure Webpack's resolve.fallback property to replace the fs module with an empty one by setting it to false.
• This same solution applies to other Node.js core modules like net, tls, path, etc.