React项目编译报错：dotenv无法解析path模块，求解决方案

问题根源 #

你的config-override.js存在语法错误，没有正确配置Webpack的resolve.fallback规则，也未添加path模块的polyfill配置，导致报错无法解决。

具体修复步骤 #

1. 安装必要依赖

首先安装所需的polyfill包和配置工具：

npm install path-browserify os-browserify process buffer react-app-rewired --save-dev

如果使用Yarn：

yarn add path-browserify os-browserify process buffer react-app-rewired --dev

2. 修正config-override.js文件

替换为以下正确配置：

const webpack = require('webpack');

module.exports = function override(config) {
  // 配置Node核心模块的polyfallback
  config.resolve.fallback = {
    ...config.resolve.fallback, // 保留原有配置（若存在）
    "path": require.resolve("path-browserify"),
    "os": require.resolve("os-browserify/browser")
  };

  // 注入process和Buffer全局变量
  config.plugins = (config.plugins || []).concat([
    new webpack.ProvidePlugin({
      process: 'process/browser',
      Buffer: ['buffer', 'Buffer']
    })
  ]);

  return config;
};

3. 修改package.json的启动脚本

将默认的react-scripts替换为react-app-rewired，让自定义配置生效：

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

4. 重新编译或启动项目

执行编译命令验证修复：

npm run build

或启动开发服务器：

npm start

为什么之前的配置无效？ #

• 原代码中config.resolve.fallback = fallback;里的fallback变量未定义，导致fallback配置被清空
• "os" ; require.resolve("os-browserify/browser");是无效代码，没有将os模块的polyfill配置到fallback中
• 完全缺少path模块的polyfill配置，这正是报错的核心原因

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