Chrome 92版本下NextJS v11.0.0 Source Maps失效问题咨询

问题原因 #

这个问题和NextJS的Source Maps配置无关，是Chrome 92版本与React DevTools浏览器扩展的兼容性问题导致：

• Chrome 92对控制台日志的调用栈统计逻辑做了调整，当React DevTools扩展为了实现组件日志关联功能，劫持了全局console方法做封装处理时，Chrome会将最终输出日志的调用方判定为扩展的注入脚本react_devtools_backend.js，直接覆盖了Source Maps解析出的原始源码调用位置。火狐浏览器没有做对应逻辑调整，因此可以正常显示原始行号。
• 你未修改package.json、next.config.js配置，默认的开发环境Source Maps本身是正常生效的，你使用的启动脚本也不会影响Source Maps生成：

"scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
    ...
  }

验证方法 #

临时禁用Chrome浏览器中的React DevTools扩展，重启浏览器后打开项目控制台，console.log就会恢复显示原始源码的文件路径与行号，即可确认Source Maps本身无故障。

修复方案 #

• 升级React DevTools扩展到4.15.0及以上版本，该版本已经官方修复了与Chrome 92的兼容问题
• 若暂时不想升级扩展，可以在项目开发环境入口代码中加入如下配置，规避console劫持逻辑：

if (process.env.NODE_ENV === 'development') {
  window.__REACT_DEVTOOLS_GLOBAL_HOOK__.supportsConsoleReload = false;
}

• 临时方案可选择降级Chrome到91及以下版本，或临时禁用React DevTools扩展排查问题

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