找不到模块：错误：无法解析 React 中的“fs”

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 配置运行的解决方案，为此，我config-overrides.js使用 npm 包“”在我的根目录中创建了一个包含以下内容的文件“ react-app-rewired”：

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

该问题与您使用的反应脚本版本有关。v5 有一个问题，因为它排除了对较低版本中可用的某些节点功能和填充的支持。

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

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

Answer 2

这是一劳永逸地结束“fs”错误的完整解决方案。理论上，您可以执行以下操作：

1. 弹出你的应用程序，通常不是最好的主意，因为它会变得一团糟。
2. 使用 webpack 4 将 React-Scripts 恢复到最新版本，即4.0.3。很容易做到，但您会错过版本 5 中添加的许多更改，如此处所示。主要是这些：Webpack 5、Jest 27、ESLint 8、PostCSS 8、快速刷新改进和错误修复、对 Tailwind 的支持。
3. 用react-app-rewired覆盖。

我认为选项 3 对于大多数人来说是最好的，特别是如果您对 webpack 不太有经验的话。

脚步：

1. 安装react-app-rewired。
2. config-overrides.js创建一个在客户端/React 项目的根目录中命名的文件。不是 SRC 根。
3. 添加以下代码，如果在您使用的任何依赖项中找不到 fs，则该代码将忽略 fs。

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

4. 将react-scripts部分替换scripts为。例子：package.jsonreact-app-rewired

// 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

5. 运行它并享受吧！

后记：我是 webpack 的新手，如果您遇到任何副作用，请通知我和社区其他人。