CODEWITHSUNDEEP
reactjsfsnode-sass
DeadApe
DeadApe

Reputation: 505

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

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?

Upvotes: 24

Views: 98758

Answers (5)

addicted2cod3
addicted2cod3

Reputation: 1

I was receiving this ⨯ ..../ Can't resolve 'fs'error ~ after I implemented a new dynamic route for my project. I noticed after scrapping everywhere I had imported query from express on a client side page(oops). After deleting this import this dang error finally cleared its self. One step closer.

Upvotes: 0

Sajjad Ali
Sajjad Ali

Reputation: 11

npm install react-app-rewired works for me

Upvotes: -3

user2542398
user2542398

Reputation: 129

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.

Upvotes: 3

Nick the Community Scientist
Nick the Community Scientist

Reputation: 1801

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

  1. Eject your app, generally not the best idea as it becomes a big mess.
  2. 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.
  3. 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:

  1. Install react-app-rewired.
  2. Create a file named config-overrides.js in the ROOT of your client/React project. NOT SRC the ROOT.
  3. 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;
};
  1. 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
  1. 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.

Upvotes: 17

Sigma VX
Sigma VX

Reputation: 426

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

Upvotes: 20

Related Questions