React项目错误指向bundle而非源码，Source Map配置无效如何解决？

算力阿峰

2026-7-12

React错误指向bundle文件而非源码（Source Map存在但未生效）的修复方案

问题背景

React项目报错时，错误栈指向打包后的bundle文件，而非本地编写的源码。已做如下配置但未解决：

添加了webpack.config.js，配置devtool: '#eval-source-map'

.env文件设置：

GENERATE_SOURCEMAP=true
WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true

开发者工具中能看到源文件，但错误映射未生效

修复步骤

1. 确认webpack配置是否被正确加载

如果是Create React App（CRA）初始化的项目，默认不会读取根目录的webpack.config.js，需要通过以下方式自定义配置：

使用react-app-rewired + customize-cra来覆盖默认配置，无需eject
若已eject项目，修改config/webpack.config.js中的devtool配置，而非新增根目录的配置文件

2. 调整devtool配置选项

#eval-source-map是webpack旧写法，且在部分场景下映射准确性不足，推荐根据环境更换：

开发环境：优先使用cheap-module-source-map，兼顾速度和映射准确性
```
module.exports = {
  devtool: 'cheap-module-source-map'
};
```
若需要更精准的映射（比如追踪行内代码），可使用source-map（但构建速度稍慢）

3. 验证环境变量配置

确保.env文件放在项目根目录，开发环境建议使用.env.development（优先级更高）
重启开发服务器，确保环境变量被重新加载（CRA不会热重载.env文件）

4. 检查开发者工具设置

在Chrome DevTools（F12）的Settings（F1）中，勾选Enable JavaScript source maps和Enable CSS source maps

若源文件路径映射混乱，可在webpack中添加路径修正配置：

const path = require('path');

module.exports = {
  devtool: 'cheap-module-source-map',
  output: {
    devtoolModuleFilenameTemplate: info =>
      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/')
  }
};