Module not found: Error: Can't resolve 'fs' in React

Question

I want to implement a SASS compiler for my online editor, for this I want to use the npm package "node-sass". However I get the error

Module not found: Error: Can't resolve 'fs' in '<MyProjectPath>\node_modules\fs.realpath'.

I already tried to disable the module via package.json by:

"browser": {
   "fs": false
}

Furthermore I found another solution which runs via the webpack configuration, for this I created a file "config-overrides.js" in my root directory with this content using the npm package "react-app-rewired":

module.exports = function override(def_config, env) {
  return {
    ...def_config,
    webpack: (config) => {
      config.resolve = {
        ...config.resolve,
        fallback: {
          "fs": false,
        }
      }
      return config
    },
  }
}

However, that doesn't fix my error either. Does anyone know how I can fix this error? I would also appreciate alternative suggestions on how to compile a SASS (as a string) into CSS (using ReactJS).

My current package.json:

{
    "name": "client",
    "version": "0.1.0",
    "private": true,
    "proxy": "http://localhost:3001",
    "dependencies": {
        "@codemirror/lang-javascript": "^0.19.3",
        "@testing-library/jest-dom": "^5.16.1",
        "@testing-library/react": "^12.1.2",
        "@testing-library/user-event": "^13.5.0",
        "assert": "^2.0.0",
        "axios": "^0.24.0",
        "codemirror": "^5.65.0",
        "console-browserify": "^1.2.0",
        "framer-motion": "^5.5.5",
        "jshint": "^2.13.1",
        "node-sass": "^6.0.0",
        "path": "^0.12.7",
        "react": "^16.13.0",
        "react-codemirror2": "^7.2.1",
        "react-dom": "^16.13.0",
        "react-router-dom": "^6.2.1",
        "react-scripts": "5.0.0",
        "styled-components": "^5.3.3",
        "util": "^0.12.4",
        "web-vitals": "^2.1.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browser": {
        "fs": false
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}

I would be extremely grateful if someone could help me with this problem.

Edit: If i add "browser": {"fs":false} to the node-module package itself, its working. But i want to push it without the node_modules folder to git and make it work by npm -i without having to change the node module itself. Any ideas how to change configuration of package.json from a module from my root package json?

score 16 · Accepted Answer · answered Feb 22 '22 at 15:59

The issue is tied to the version of react-scripts you are using. v5 has an issue as it excludes support for some node features and polyfills that were available in lower versions.

Your quick fix is to take react scripts down to v4 until a fix for v5 is in place unless you are comfortable with: 1) ejecting your app; 2) adding the webpack config changes that are needed. This link recaps the ongoing discussion of this topic.

Issue Recap: https://github.com/facebook/create-react-app/issues/11756

Thank you! Downgrading to react-scripts v4 did the trick. I no longer have the 'fs' error. — Knuxchan, Mar 17 '22 at 04:48

Nick the Community Scientist · Answer 2 · 2022-09-09T11:28:56.803

Here is a full solution to end the 'fs' error once and for all. In theory, you can do the following:

Eject your app, generally not the best idea as it becomes a big mess.
Revert react-scripts to the latest version with webpack 4, which is 4.0.3. Easy to do, but you miss out on a lot of changes added in version 5 as can be seen here. Mainly these: Webpack 5, Jest 27, ESLint 8, PostCSS 8, Fast Refresh improvements and bug fixes, Support for Tailwind.
Override with react-app-rewired.

I think option 3 is best for most people, and especially if you are not very experienced with webpack.

Steps:

Install react-app-rewired.
Create a file named config-overrides.js in the ROOT of your client/React project. NOT SRC the ROOT.
Add the following code, which ignores fs if it's not found in any of the dependencies you are using.

module.exports = function override(config, env) {
  console.log("React app rewired works!")
  config.resolve.fallback = {
    fs: false
  };
  return config;
};

Replace react-scripts in the scripts section of package.json with react-app-rewired. Example:

// Other stuff above such as dependencies section
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  },
// Other stuff below such as eslintConfig or browserslist section

Run it and enjoy!

Postscript: I am new to webpack, if you experience any side effects from this, please inform me and the rest of the community.

I get an "Invalid configuration object" error: "Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve has an unknown property 'fallback'. These properties are valid [...]" — jdempcy, Nov 18 '22 at 15:52

score 2 · Answer 3 · answered Jan 10 '23 at 18:40

If you have mistakenly(auto-import) imported a server-side package in React Client Side this error appears. As in my case, I mistakenly imported response from express in react component.

import { response } from 'express'

by removing this import my error vanished. One of my friends faced the same issue. He mistakenly(auto-import) imported JSON from express in React component.

score 0 · Answer 4 · answered Apr 20 '23 at 05:44

0

'react-app-rewired' is not recognized as an internal or external command, operable program or batch file.

answered Apr 20 '23 at 05:44

AHAMMED SHABAS KB

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 24 '23 at 20:19

score -2 · Answer 5 · answered Mar 06 '23 at 11:00

-2

npm install react-app-rewired works for me

answered Mar 06 '23 at 11:00

Sajjad Ali

47
1
6

Module not found: Error: Can't resolve 'fs' in React

5 Answers5

Linked