找不到模块：错误：无法解析 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 配置运行的解决方案，为此，我使用 npm 包“

config-overrides.js

”在我的根目录中创建了一个包含此内容的文件“

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. 在客户端/React 项目的根目录中创建一个名为

   config-overrides.js

   的文件。不是 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.json

   替换为

   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 的新手，如果您遇到任何副作用，请通知我和社区的其他成员。

Answer 3

如果您在 React 客户端中错误地（自动导入）导入了服务器端包，则会出现此错误。就像我的例子一样，我错误地在 React 组件中导入了来自 Express 的响应。

从“express”导入{response}

通过删除此导入，我的错误消失了。 我的一位朋友也面临着同样的问题。他错误地（自动导入）从React组件中的express导入了JSON。

Answer 4

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

Answer 5

在我为我的项目实现了新的动态路由之后，我收到了这个 ⨯ ..../ 无法解决“fs”错误〜。我注意到在废弃所有地方后，我在客户端页面上从 Express 导入了查询（哎呀）。删除此导入后，这个该死的错误终于清除了。又近了一步。

Answer 6

npm install react-app-rewired 对我有用