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

Question

我想为我的在线编辑器实现一个 SASS 编译器，为此我想使用 npm 包“node-sass”。但是我收到错误

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

我已经尝试通过 package.json 禁用模块：

"browser": {
   "fs": false
}

此外，我发现了另一个通过 webpack 配置运行的解决方案，为此我使用 npm 包“react-app-rewired”在我的根目录中创建了一个文件“config-overrides.js”，内容如下：

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

但是，这也不能解决我的错误。有谁知道我该如何解决这个错误？我也很感激关于如何将 SASS（作为字符串）编译成 CSS（使用 ReactJS）的替代建议。

我现在的 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"
        ]
    }
}

如果有人能帮助我解决这个问题，我将不胜感激。

编辑：如果我将 "browser": {"fs":false} 添加到节点模块包本身，它的工作。但是我想在没有 node_modules 文件夹的情况下将其推送到 git 并通过 npm -i 使其工作，而无需更改节点模块本身。关于如何从我的根包 json 中的模块更改 package.json 的配置的任何想法？

Answer 1

此问题与您使用的 react-scripts 版本有关。 v5 有一个问题，因为它不支持较低版本中可用的某些节点功能和 polyfill。

你的快速修复是将 React 脚本降到 v4，直到 v5 的修复到位，除非你对以下情况感到满意：1) 弹出你的应用程序； 2) 添加所需的 webpack 配置更改。此 link 回顾了关于该主题的持续讨论。

问题回顾：https://github.com/facebook/create-react-app/issues/11756

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

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

fs

reactjs

node-sass