create-react-app/React 18如何让控制台警告显示源映射文件

问题表现 #

升级依赖后Chrome控制台输出的警告、报错调用栈不映射到源码文件，仅显示打包后bundle路径：

• 异常输出：at SelectInput (http://localhost:3000/static/js/bundle.js:119921:25)
• 预期输出：at SelectInput (Select.tsx:123)

当前项目依赖版本参考：

{
  "dependencies": {
    "@babel/runtime": "^7.18.3",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@types/node": "^15.12.2",
    "@types/react": "^18.0.12",
    "@types/react-dom": "^18.0.5",
    "react": "^18.1.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^5.0.1",
    "typescript": "^4.7.3"
  }
}

前置检查 #

先确认Chrome DevTools基础配置正确，排除浏览器设置问题：

• 打开DevTools，点击右上角齿轮形状的设置按钮
• 找到Sources分类，确认Enable JavaScript source maps选项已勾选
• 关闭设置页，重启DevTools后刷新页面重试

方案1：零配置修复（无需修改webpack，优先尝试） #

使用react-scripts内置的环境变量调整源映射生成规则，不需要eject项目也不需要安装额外依赖：

1. 在项目根目录新建.env文件，写入以下配置：

GENERATE_SOURCEMAP=true

2. 如果是TypeScript项目，打开根目录tsconfig.json，确认compilerOptions中开启了sourceMap生成：

{
  "compilerOptions": {
    "sourceMap": true
  }
}

3. 完全终止当前运行的本地开发服务进程，重新执行npm start或yarn start启动项目，不要依赖热重载加载新配置。

方案2：轻量自定义配置（方案1无效时使用） #

如果方案1不生效，不需要eject项目，通过自定义webpack调整devtool规则即可：

1. 安装开发依赖：

npm install react-app-rewired --save-dev

2. 在项目根目录新建config-overrides.js文件，写入以下配置：

module.exports = function override(config, env) {
  if (env === 'development') {
    // 替换默认的devtool配置，保证栈信息精确映射到源文件行列
    config.devtool = 'eval-source-map'
  }
  return config
}

3. 修改package.json中的scripts字段，将原有react-scripts命令替换为react-app-rewired：

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

4. 重启开发服务即可生效。

方案3：已eject项目配置修改 #

如果已经执行过npm run eject暴露了内置webpack配置，直接修改配置文件即可：

1. 打开根目录下config/webpack.config.js文件
2. 找到开发环境对应的devtool配置项，修改为：

const isEnvDevelopment = webpackEnv === 'development'
return {
  // 其他配置保持不变
  devtool: isEnvDevelopment ? 'eval-source-map' : 'source-map',
}

3. 重启开发服务生效。

说明：react-scripts 5.0.x版本默认在开发环境使用eval-cheap-module-source-map作为devtool，该模式为了提升构建速度省略了列级映射，部分React 18场景下会出现栈信息无法匹配源文件的问题。切换为eval-source-map仅会小幅降低开发环境构建速度，完全不影响生产环境的构建产物和性能。

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