使用Webpack运行React项目时出现Can't resolve 'fs' in 'dotenv/lib'错误求助

你遇到的问题核心在于：dotenv本身是为Node.js环境设计的，它的config()方法会用Node的fs模块读取本地.env文件，但浏览器环境根本没有fs模块，直接在组件里调用dotenv就会导致Webpack试图打包不存在的fs，从而报错。

下面给你两种靠谱的解决方案，都是在Webpack构建阶段注入环境变量，完全避开浏览器端的fs依赖问题：

方案一：使用dotenv-webpack插件（推荐） #

这是最省心的方式，专门为Webpack场景封装了dotenv的功能：

1. 先安装插件：

npm install dotenv-webpack --save-dev

2. 修改你的webpack.config.js，引入并配置插件：

const Dotenv = require('dotenv-webpack');

module.exports = {
  // 你的其他Webpack配置（entry、module、output等）
  plugins: [
    // 添加dotenv-webpack插件
    new Dotenv({
      path: './.env', // 指定你的.env文件路径，默认是项目根目录
    }),
  ],
};

3. 之后在你的TSX组件里，直接使用环境变量即可，不需要再写任何require('dotenv')的代码：

const slackUrl = process.env.JOIN_URL;
console.log(`process.env.JOIN_URL: ${slackUrl}`);

方案二：手动用Webpack的DefinePlugin注入 #

如果你不想额外安装插件，可以用Webpack自带的DefinePlugin来手动处理：

1. 确保已经安装了dotenv（你已经装过了）：

npm install dotenv --save-dev

2. 修改webpack.config.js：

const webpack = require('webpack');
const dotenv = require('dotenv').config({ path: './.env' });

module.exports = {
  // 你的其他Webpack配置
  plugins: [
    new webpack.DefinePlugin({
      // 将.env里的变量序列化为字符串注入到代码中
      'process.env': JSON.stringify(dotenv.parsed),
    }),
  ],
};

3. 同样，组件里直接使用process.env.JOIN_URL即可，不需要require dotenv。

额外注意事项 #

• 把你的.env文件加入.gitignore，不要提交到版本库，避免敏感信息泄露
• 如果用TypeScript，可能会出现process.env类型报错，你可以在项目根目录新建global.d.ts文件，添加类型声明：

declare global {
  namespace NodeJS {
    interface ProcessEnv {
      JOIN_URL: string;
      // 可以添加其他你用到的环境变量类型
    }
  }
}

export {};

• 之前你在package.json里加的"browser": {"fs": false}之所以没用，是因为Webpack还是会尝试解析dotenv里的fs调用，只是把它替换成false，但dotenv的逻辑还是会因为找不到fs而报错，根本解决思路还是不要在浏览器端执行dotenv的代码。

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