React17下create-react-app项目控制台堆栈不显示源码行号问题

React 17重构了内部告警、错误的抛出逻辑，所有组件渲染阶段产生的提示信息会统一冒泡到react-dom的根渲染调用处，搭配Create React App v4+ 默认的开发环境SourceMap配置cheap-module-source-map（仅包含行级映射、不包含完整调用栈映射），就会出现所有提示仅指向入口index.js的问题。

方案1：未eject的CRA项目调整配置 #

• 安装依赖：

npm install @craco/craco --save-dev

• 项目根目录新建craco.config.js，添加如下配置：

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      if (process.env.NODE_ENV === 'development') {
        // 替换默认的sourcemap配置，支持完整堆栈映射
        webpackConfig.devtool = 'eval-source-map';
      }
      return webpackConfig;
    }
  }
};

• 修改package.json中的scripts命令，把react-scripts替换为craco：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test"
}

• 重启开发服务即可看到正常的源码位置提示。

方案2：已eject的CRA项目调整配置 #

直接修改config/webpack.config.js，找到开发环境下的devtool配置项，将值从默认的cheap-module-source-map改为eval-source-map，重启服务即可生效。

临时定位方案 #

无需修改配置，直接点击控制台告警/错误左侧的展开箭头，查看完整调用栈，跳过所有路径包含react-dom、react的栈帧，第一个匹配你项目业务代码的栈帧就是对应的错误位置。

• 确保浏览器控制台设置中已开启「启用JavaScript源映射」（Chrome浏览器可在控制台设置的「偏好设置」中找到该选项）
• 不要在生产环境开启eval-source-map，会增大构建产物体积、泄露源码

内容的提问来源于stack exchange，提问作者Nathanaël Spriet