reactjsfsnode-sass

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?


Solution

  • 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