模块未找到: 错误: 无法解析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"
        ]
    }
}

如果有人能帮我解决这个问题，我将非常感激。

编辑： 如果我向node-module包本身添加"browser":{"fs":false}，它会正常工作。但我想在不包括node_modules文件夹的情况下将其推送到git并通过npm -i使其工作，而不必更改节点模块本身。 有什么办法可以从我的根软件包json更改包含模块的package.json的配置吗？

- DeadApe

Answer 1

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

您的快速解决方法是将 react-scripts 降级到 v4，直到 v5 的修复完成，除非您愿意：1）弹出您的应用程序；2）添加所需的 webpack 配置更改。此链接概述了此主题的讨论。

问题概述：https://github.com/facebook/create-react-app/issues/11756。

- Sigma VX

---

谢谢！降级到 react-scripts v4 就解决了问题。我不再遇到 'fs' 错误了。 - Knuxchan

Answer 2

这里提供一种完整的解决方案，可以彻底解决“fs”错误。

理论上，您可以执行以下操作：

1. 弹出您的应用程序，通常不是最好的选择，因为它会变得很混乱。
2. 将react-scripts恢复到使用webpack 4的最新版本，即4.0.3。虽然很容易完成，但您将错过版本5中添加的许多更改，如在此处可见。主要包括Webpack 5、Jest 27、ESLint 8、PostCSS 8、Fast Refresh改进和错误修复，以及Tailwind的支持。
3. 使用react-app-rewired进行覆盖。

我认为对于大多数人来说，选项3是最佳选择，特别是如果您对webpack不是非常熟悉的话。

步骤如下：

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

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

4. 将package.json文件中scripts部分的react-scripts替换为react-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还不熟悉，如果您从中遇到任何副作用，请告诉我和社区的其他成员。

- Nick the Community Scientist

---

我收到了一个“无效的配置对象”错误：“Webpack已经使用不符合API模式的配置对象进行初始化。

• 配置.resolve具有未知属性'fallback'。这些属性是有效的[...]”

- jdempcy

只有这种方法能帮助我！ - middleStackoverflower

Answer 3

如果您错误地（自动导入）在React客户端中导入了服务器端包，就会出现这个错误。就像我的情况一样，我错误地在React组件中从express导入了response。

通过删除这个导入，我的错误消失了。我的一个朋友也遇到了同样的问题。他错误地（自动导入）在React组件中导入了express中的JSON。

- user2542398

Answer 4

'react-app-rewired' 不被识别为内部或外部命令，可执行程序或批处理文件。

- AHAMMED SHABAS KB

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community

Answer 5

npm install react-app-rewired 对我来说有效

- Sajjad Ali