React 开发工具：“解析钩子名称”操作引发“钩子解析失败”错误

Question

当我使用 react devtools 检查我的代码时，我注意到一些钩子会触发此错误并导致“解析钩子名称”操作出错。 当我检查反应开发工具时，它输出：

main.js:4878 Error: Could not find runtime location for line:177321 and column:81
    at Object.originalPositionFor

从Facebook/React 问题上的这个线程开始，它似乎可能与 webpack 源映射相关。 有人对可能导致这种情况的原因有任何想法吗？ 它不仅发生在自定义钩子上，而且发生在我的代码库中的标准 useState 和 useCallback 钩子上。

Answer 1

这确实与您的 webpack devtool选择如何处理源映射有关。

如果您想快速修复，请尝试像这样更新您的 webpack：

// webpack.config.js

module.exports = {
  //  ...

  return {
     devtool: "cheap-module-source-map",
     
     // or if you're using the same webpack config for prod + dev:
     // devtool: process.env["NODE_ENV"] === "development" ? "cheapmodule-source-map" : "source-map",

    // ... 
  }
}

cheap-module-source-map对我和这里的其他一些人有用。 但它不一定是唯一的，它伴随着一些权衡。 如果您想尝试其他开发工具并了解更多信息，请参阅devtools devtool文档

Answer 2

虽然我没有看到您发布的错误行，但这经常发生在我身上，通常可以通过更新我的浏览器 (Brave) 来解决。