React Dev Tools执行parse hook names操作抛出Hook parsing failed错误如何排查

问题根因 #

Error: Could not find runtime location for line:xxx and column:xx at Object.originalPositionFor报错，是React DevTools执行hook名称解析时，无法通过构建生成的source map匹配到对应源码的行列位置导致的，标准hook和自定义hook都可能触发，且多为间歇性出现。

排查与解决思路 #

• 优先升级React DevTools浏览器扩展到最新稳定版，升级后打开DevTools设置页，点击「Reset debugging cache」清空调试缓存，强制刷新页面后验证问题是否消失。旧版本DevTools存在source map解析的已知兼容bug，是该问题的高发诱因。
• 调整webpack的devtool配置：开发环境避免使用eval开头的source map类型（这类配置在增量编译场景下极易生成断链的source map），优先测试source-map或cheap-module-source-map配置，修改后重启构建服务验证。
• 排查热更新（HMR）的增量编译异常：该问题间歇性触发大多和HMR阶段的source map拼接错误有关，出现报错时直接全量刷新页面不走热更新，若问题消失则可确认是HMR导致，可升级webpack、webpack-dev-server到最新稳定版，或开发阶段临时关闭HMR规避。
• 关闭开发环境的代码压缩配置：若开发环境开启了terser-webpack-plugin、babel压缩插件等代码混淆工具，会打乱源码与编译后代码的行列号映射，关闭所有压缩配置后再验证。
• 校验自定义hook命名：所有自定义hook必须严格遵循useXxx的驼峰命名规则，非use开头的函数即使内部调用了hook，也会导致DevTools的hook解析逻辑异常。

内容的提问来源于stack exchange，提问作者sgarcia.dev