Fixing the “Module Not Found: Can’t Resolve ‘fs’” Error in ReactJS

If you’re building a ReactJS application and suddenly encounter the dreaded “Module not found: Can’t resolve ‘fs’” error, you’re not alone. This issue often appears when working with third-party libraries or packages that rely on Node.js core modules. The good news? It’s a common problem with several straightforward solutions. In this guide, we’ll break down why the error happens, when it occurs, and how to fix it without breaking your React project.

Understanding the “Can’t Resolve ‘fs’” Error in ReactJS

When working with ReactJS, one of the most confusing issues developers run into is the “Module not found: Can’t resolve ‘fs’” error. To understand why this happens, it’s important to first understand the difference between Node.js and ReactJS environments.

Why fs Exists in Node.js but Not in React

• Node.js is a runtime environment that allows developers to run JavaScript outside the browser. It includes built-in modules like fs (file system), path, and os, which allow direct interaction with the underlying machine.
• ReactJS, on the other hand, runs in the browser. Browsers are sandboxed environments for security reasons, meaning they cannot access your computer’s file system directly. This is why the fs module doesn’t exist in the browser.

Error Message Breakdown

The error usually looks like this:

Module not found: Can’t resolve ‘fs’

What this means is that somewhere in your code—or within a dependency you installed—there is an attempt to import or require the fs module. Since Webpack (or Vite, CRA, or another bundler) cannot find a browser-compatible version of fs, the build process fails.

When Does This Error Appear?

• When installing server-side libraries like jsonwebtoken, bcrypt, or pdfkit in a React app
• When using npm packages that are meant for Node.js rather than the browser
• When importing backend code accidentally into frontend files
• When migrating an existing Node.js project into a React environment without adjustments

This is not necessarily a bug in your code but a mismatch between environments. The fs module doesn’t belong in frontend React projects.

Key Takeaway: The error occurs because React runs in the browser, which cannot access Node.js modules like fs. It’s a signal that your code or dependencies are trying to use server-side functionality in a client-side environment.

Common Scenarios That Trigger the Error

Understanding why this error occurs is helpful, but identifying the specific scenarios that trigger it is even more valuable. Developers often face this issue when working with certain libraries or project structures.

1. Using Server-Side Libraries in React

Some libraries are built to run on Node.js servers and not in the browser. If you accidentally install them in your React project, the fs dependency may cause build errors. Common examples include:

• jsonwebtoken
• bcrypt
• pdfkit
• express (entirely server-side)

2. Third-Party Dependencies with fs References

Sometimes you didn’t import fs directly, but one of your dependencies references it internally. For instance:

• A utility library that includes both server and client code but fails to tree-shake properly
• A package that assumes Node.js as the runtime environment

3. Mixing Backend and Frontend Code

Another common cause is when you reuse utility files or helper functions written for Node.js and import them directly into React. For example:

// Backend file

const fs = require(‘fs’);

If this file is imported into a React component, the build will fail.

4. Build Tool Differences

Each bundler handles Node core modules differently.

• Webpack: Requires manual configuration for fallbacks.
• Vite: Uses Rollup under the hood and may need polyfills.
• Create React App: Hides Webpack config by default, making configuration tricky.

Quick Reference Table

Scenario	Why It Breaks ReactJS	Example Package
Using Node.js-only libraries	A browser cannot run server-side code	bcrypt, jsonwebtoken
Dependency referencing fs	Some packages assume a Node environment	pdfkit
Importing backend code into frontend	Mixing server logic with client logic	fs, path
Bundler mismatch	Webpack/Vite not configured for Node modules	Custom builds

Key Takeaway: The error is commonly caused by importing Node-only libraries, dependencies with hidden fs calls, or mixing backend and frontend code in React. Always check your packages and imports carefully.

Fixing the Error by Adjusting Dependencies

Once you know what causes the problem, the next step is fixing it. In many cases, the cleanest solution is simply adjusting your dependencies.

1. Remove Node-Only Packages

If you’ve accidentally installed a Node.js-specific library in React, remove it:

npm uninstall bcrypt

Instead, look for browser-friendly alternatives. For authentication, you could use browser-based JWT parsing libraries or call a backend API.

2. Replace with Browser-Compatible Alternatives

Some libraries have browser-friendly counterparts:

• Instead of fs → use
• Instead of path → use path-browserify
• Instead of os → use os-browserify

3. Use Browser APIs Instead of Node Modules

Browsers already provide APIs for handling files. For example:

// Browser alternative to fs.readFile

const input = document.querySelector(“#fileInput”);

input.onchange = (e) => {

const file = e.target.files[0];

console.log(“Selected:”, file.name);

};

4. Check Your package.json and Imports

Review your dependencies to ensure no Node-only packages are present in your React app.

Checklist for Dependencies:

• Does this package mention “Node.js only”?
• Does it rely on fs, os, or path?
• Is there a browser-compatible alternative available?

Key Takeaway: The easiest fix is removing or replacing problematic dependencies with browser-compatible alternatives. Use native browser APIs where possible instead of Node modules.

Configuring Webpack or Create React App to Handle ‘fs’

Sometimes, removing dependencies isn’t an option. If you must keep a library that references fs, you can configure your bundler to handle the issue.

Webpack Fix

Update webpack.config.js with:

resolve: {

fallback: {

fs: false

}

}

This tells Webpack to ignore the fs module instead of failing.

Create React App (CRA) Fix

CRA doesn’t let you modify Webpack directly. You can use:

• react-app-rewired
• craco

Example with CRACO:

// craco.config.js

module.exports = {

webpack: {

configure: (webpackConfig) => {

webpackConfig.resolve.fallback = { fs: false };

return webpackConfig;

},

},

};

Vite Fix

Vite requires polyfills since it uses Rollup under the hood:

npm install rollup-plugin-node-polyfills

Then update vite.config.js:

import { defineConfig } from ‘vite’;

import nodePolyfills from ‘rollup-plugin-node-polyfills’;

export default defineConfig({

plugins: [nodePolyfills()]

});

When Should You Configure Instead of Removing?

• When the library is essential but only references fs in optional parts of the code
• When switching to an alternative package isn’t feasible

Key Takeaway: If removing dependencies isn’t possible, configure your bundler (Webpack, CRA, or Vite) to ignore or polyfill the fs module.

Best Practices to Avoid Node-Specific Errors in ReactJS

Prevention is always better than a cure. To stop seeing this error in future projects, follow a few best practices.

1. Separate Backend and Frontend Code

Keep backend logic in a Node.js/Express server and use APIs to communicate with your React frontend. This ensures server-side modules stay where they belong.

2. Evaluate NPM Packages Before Installing

Check the documentation and verify whether the package is meant for browsers or Node.js. Look for keywords like browser-compatible or Node.js-only.

3. Use Environment-Aware Imports

If you must use a Node module, wrap it in environment checks:

if (typeof window === ‘undefined’) {

const fs = require(‘fs’);

}

4. Prefer Browser APIs

Modern browsers provide APIs for file handling, storage, and networking. Examples:

• File API → instead of fs
• Local Storage/IndexedDB → instead of writing files
• Fetch API → instead of server-side request libraries

5. Maintain Clean Project Structure

Organize your project into frontend and backend folders to avoid accidentally mixing logic.

Best Practices Table

Practice	Why It Helps
Separate frontend/backend logic	Prevents accidental imports of Node modules
Evaluate npm packages	Avoids adding incompatible dependencies
Use environment-aware imports	Ensures Node-only code doesn’t run in the browser
Prefer browser APIs	Keeps functionality native and lightweight
Clean project structure	Reduces the chances of mixing environments

Key Takeaway: Following good project structure, using browser APIs, and carefully evaluating dependencies will prevent most Node-specific errors in React.

Conclusion

Running into the “Module not found: Can’t resolve ‘fs’” error in ReactJS can be frustrating, especially when you’re in the middle of building or testing your application. The important thing to remember is that this issue isn’t a bug in React itself, but rather a mismatch between environments. The fs module is a Node.js feature designed for server-side applications, and browsers don’t support it.

By understanding why the error occurs, you can fix it quickly—whether that means removing or replacing incompatible dependencies, configuring your bundler to ignore or polyfill the fs module, or relying on modern browser APIs for file handling. Taking the time to separate backend and frontend logic, and choosing the right libraries, will also help you avoid similar problems in the future.

FAQs

Why does React not support the fs module?

React runs in the browser, and browsers cannot access the file system directly, unlike Node.js.

Can I use fs in a Next.js project?

Yes, but only in server-side functions (like getStaticProps or API routes), not in client-side code.

What is the simplest fix for this error?

Set fs: false in your Webpack config or remove Node-only dependencies from your React project.

Are there alternatives to fs for handling files in React?

Yes, you can use the browser’s File API, local storage, or external APIs depending on your needs.

Will polyfilling fs solve all problems?

Not always—polyfills can work for basic operations, but advanced file system tasks require a backend server.

Additional Resources