使用react-scripts（未用WebPack）解决fs、path、os缺失问题

项目使用纯react-scripts构建，打包时出现以下错误：

Module not found: Error: Can't resolve 'fs' in '/home/porton/Projects/passport_client_dfinity/node_modules/dotenv/lib'
...
Module not found: Error: Can't resolve 'path' in '/home/porton/Projects/passport_client_dfinity/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "path": require.resolve("path-browserify") }'
    - install 'path-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "path": false }
...
Module not found: Error: Can't resolve 'os' in '/home/porton/Projects/passport_client_dfinity/node_modules/dotenv/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "os": require.resolve("os-browserify/browser") }'
    - install 'os-browserify'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "os": false }

项目scripts配置：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "sources": "mops sources"
},

已尝试在package.json中添加以下配置但无效：

"browser": {
  "fs": false,
  "path": false,
  "os": false
}

询问如何解决该问题，是否需要切换到直接使用Webpack。

优先排查：是否误在前端代码中引入了dotenv #

dotenv是Node.js环境下加载环境变量的工具，而react-scripts本身已经集成了环境变量处理能力：

• 在项目根目录创建.env、.env.development、.env.production等文件，变量名以REACT_APP_开头
• 启动或构建项目时，react-scripts会自动加载这些变量，直接在代码中通过process.env.REACT_APP_XXX访问即可

如果你的代码中存在import dotenv from 'dotenv'或require('dotenv').config()这类语句，直接删除它们，改用react-scripts原生的环境变量方式，这是最根本的解决方法，无需修改Webpack配置。

方法一：用react-app-rewired修改Webpack配置（无需eject） #

如果确实需要保留dotenv的使用，可以通过react-app-rewired在不eject的情况下修改Webpack配置：

1. 安装依赖：

npm install --save-dev react-app-rewired customize-cra

2. 修改package.json中的scripts：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject",
  "sources": "mops sources"
}

3. 在项目根目录创建config-overrides.js文件，添加以下内容：

const { override, addWebpackResolve } = require('customize-cra');

module.exports = override(
  addWebpackResolve({
    fallback: {
      "fs": false,
      "path": false,
      "os": false
    }
  })
);

4. 重新启动或构建项目即可。

方法二：eject后修改Webpack配置（不可逆） #

如果愿意eject（eject后无法恢复到默认的react-scripts配置），可以执行以下步骤：

1. 执行eject命令：

npm run eject

2. 在项目根目录找到config/webpack.config.js，找到resolve.fallback配置项（如果没有则添加），修改为：

resolve: {
  // ...其他配置
  fallback: {
    "fs": false,
    "path": false,
    "os": false
  }
}

3. 重新启动或构建项目。

是否需要切换到直接使用Webpack？ #

不需要。上述两种方法都可以在react-scripts的基础上解决问题，无需直接切换到Webpack。只有当你需要大量定制Webpack配置，且react-app-rewired无法满足需求时，才考虑直接使用Webpack。

内容的提问来源于stack exchange，提问作者porton