无法在反应应用程序构建阶段解析“fs”

Question

不确定缺少什么或我做错了什么，但我无法让这个库为我的生活工作

{
  "name": "react",
  "version": "18.2.0",
  "private": true,
  "homepage": "/",
  "dependencies": {
    "@babel/plugin-proposal-decorators": "^7.23.9",
    "@fortawesome/fontawesome-svg-core": "^6.5.1",
    "@fortawesome/free-solid-svg-icons": "^6.5.1",
    "@fortawesome/react-fontawesome": "^0.2.0",
    "@fortawesome/react-native-fontawesome": "^0.3.0",
    "axios": "^1.6.7",
    "bcryptjs": "^2.4.3",
    "crypto": "^1.0.1",
    "crypto-browserify": "^3.12.0",
    "crypto-js": "^4.2.0",
    "css-loader": "^7.1.1",
    "dotenv": "^16.4.5",
    "framer-motion": "^10.18.0",
    "fs": "^0.0.1-security",
    "jsencrypt": "^3.3.2",
    "jsonwebtoken": "^9.0.2",
    "jwt-decode": "^4.0.0",
    "node-forge": "^1.3.1",
    "node-rsa": "^1.1.1",
    "os": "^0.1.2",
    "package.json": "^2.0.1",
    "path": "^0.12.7",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-cookie-consent": "^9.0.0",
    "react-dom": "18.2.0",
    "react-icons": "^5.0.1",
    "react-multi-carousel": "^2.8.4",
    "react-native-svg": "^14.1.0",
    "react-phone-input-2": "^2.15.1",
    "react-phone-number-input": "^3.3.9",
    "react-scripts": "^5.0.1",
    "sass": "^1.77.1",
    "sass-loader": "^14.2.1",
    "style-loader": "^4.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "BUILD_PATH='/m2-react/public-html-build/' react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "react-scripts": "^5.0.1"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

不知道为什么它不能从依赖项中看到它 npm install 工作一切正常。

有什么不同吗，其他库名称或者它实际上是如何工作的？

这不应该是 Node.js 的一部分吗？

Answer 1

要解决此问题，您可以尝试以下操作：

1. 使用“browser-fs”或“file-saver”等库，为“fs”模块提供浏览器友好的替代方案。
2. 将需要“fs”模块的代码移至 Node.js 环境，例如服务器端 API 或在构建过程中运行的脚本。
3. 使用 Webpack 或 Rollup 等捆绑程序在构建中包含“fs”模块，但请注意，这在浏览器环境中可能无法按预期工作。

以下是如何使用“browser-fs”库的示例：

import { writeFile } from 'browser-fs';

writeFile('file.txt', 'Hello, world!', (err) => {
  if (err) {
    console.error(err);
  } else {
    console.log('File written successfully!');
  }
});```

Remember to install the 'browser-fs' library first by running npm install browser-fs or yarn add browser-fs in your terminal.