React18 Chakra TS项目引入dotenv构建报Can't resolve 'fs'错误

报错本质是两个问题叠加导致的：

• 用法错误：dotenv是Node.js服务端专用的工具包，依赖Node内置的fs文件系统模块读取本地环境变量文件，浏览器运行环境不存在fs模块，本来就不应该在前端业务代码里引入使用。
• 构建规则变化：你项目用的react-scripts 5.0.1是React 18配套的构建版本，底层升级到Webpack 5后，默认移除了Webpack 4自带的Node.js核心模块自动polyfill/忽略逻辑。React 17项目通常搭配react-scripts 4.x，构建时会自动跳过这类浏览器端不存在的Node模块，所以不会触发报错，升级后问题直接暴露。
• 额外说明：Create React App脚手架本身已经内置了环境变量读取能力，完全不需要手动安装dotenv处理.env文件。

按顺序操作即可解决问题：

1. 卸载多余的dotenv依赖，执行命令：

yarn remove dotenv

2. 删除App.tsx里手动添加的dotenv相关代码，也就是以下两行：

import * as dotenv from 'dotenv';
dotenv.config();

3. 遵循CRA内置的环境变量规则使用配置：
   • 在项目根目录创建.env文件，所有需要在前端代码中读取的环境变量，必须以REACT_APP_作为前缀，示例：

     REACT_APP_API_DOMAIN=https://demo-api.com
     REACT_APP_SITE_TITLE=My Chakra App
     

   • 业务代码中直接通过process.env.REACT_APP_对应变量名读取即可，不需要额外引入依赖。
   • 修改.env文件后需要重启开发服务、重新执行build命令，新的环境变量才会生效。

注意：所有REACT_APP_开头的环境变量都会被明文打包进前端静态资源，任何访问站点的用户都可以在浏览器源码中看到这些值，绝对不要在这类变量中存放密钥、数据库密码等敏感信息。

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