React-redux项目渲染警告堆栈未应用Source Maps无法定位问题求助

问题说明 #

开发过程中遇到如下警告，堆栈仅指向webpack压缩后文件，无法定位业务代码位置：

Warning: Cannot update a component (`Connect(Main)`) while rendering a different component (`MainComponent`). To locate the bad setState() call inside `MainComponent`

已尝试开启Chrome Source Map、构建带Source Map的生产版本均无效，且不希望执行npm run eject修改webpack配置。

解决方案 #

• 方案1：非侵入式修改webpack配置
  若使用create-react-app搭建项目，可通过react-app-rewired+customize-cra修改配置，无需eject：
  1. 安装开发依赖：

  npm install react-app-rewired customize-cra -D
  

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

  const { override } = require('customize-cra');
  
  module.exports = override((config) => {
    // 开发环境启用全量Source Map，保证堆栈可映射到业务源码
    if (process.env.NODE_ENV === 'development') {
      config.devtool = 'source-map';
    }
    return config;
  });
  

  3. 修改package.json中的scripts字段，将所有react-scripts启动命令替换为react-app-rewired，重启开发服务后即可看到映射后的真实源码堆栈。
• 方案2：断点直接定位问题逻辑
  无需修改配置，通过Chrome调试器断点定位错误位置：
  1. 点击控制台警告的堆栈入口，跳转到React抛出警告的代码行
  2. 右键添加条件断点，输入条件message.includes('Cannot update a component')
  3. 重新触发警告时调试器会自动暂停，此时向上遍历调用栈，即可找到对应业务代码的执行位置，可通过上下文变量、组件props识别对应的业务逻辑。
• 方案3：定向排查通用触发场景
  该警告的本质是MainComponent渲染阶段同步触发了父组件状态更新，可直接排查该组件的以下逻辑：
  • render方法内是否直接调用了redux的dispatch方法
  • 组件属性计算逻辑中是否触发了setState或者dispatch
  • 子组件的render-props/回调函数是否在父组件渲染时同步执行

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