如何在React中使用dotenv？遇fs模块未找到错误求助

核心问题拆解 #

• 变量名不匹配：你.env里定义的是REACT_APP_KEY，但代码里调用的是process.env.REACT_APP_PUBLIC_KEY，两者名称不一致，这是最基础的错误。
• 没必要手动装dotenv：Create React App（以下简称CRA）本身已经内置了dotenv的处理逻辑，额外安装dotenv会导致Webpack 5尝试加载Node.js的fs模块——而浏览器环境根本不支持这个模块，直接触发缺失报错。

修复步骤 #

1. 对齐环境变量名 #

二选一即可：

• 要么把.env里的内容改成REACT_APP_PUBLIC_KEY=11234
• 要么把代码里的调用改成process.env.REACT_APP_KEY

2. 卸载手动安装的dotenv #

执行命令移除多余依赖：

npm uninstall dotenv
# 用yarn的话：
yarn remove dotenv

3. 重启开发服务器 #

环境变量的修改必须重启服务才能生效，先停掉当前的npm start进程，再重新启动：

npm start

特殊场景：自定义Webpack配置（非CRA默认用户） #

如果你已经eject或者用了craco、react-app-rewired这类工具改Webpack配置，需要给fs模块加fallback：

1. 安装依赖：

npm install fs-browserify os-browserify --save-dev

2. 在Webpack配置文件里添加：

module.exports = {
  // 其他配置...
  resolve: {
    fallback: {
      "fs": require.resolve("fs-browserify"),
      "os": require.resolve("os-browserify/browser")
    }
  }
}

⚠️ 注意：浏览器里本来就不能用fs读本地文件，这个方案只适用于某些依赖强制要求fs的特殊情况，普通CRA用户完全没必要这么做。

验证方法 #

重启服务后，在组件里加一行代码测试：

console.log(process.env.REACT_APP_KEY); // 正常会输出11234

内容的提问来源于stack exchange，提问作者Eduardo Alejandro Botello Peña