'React Dev Tools: "parse hook names" action throws a "Hook parsing failed" error

When I inspect my code using the react devtools, I'm noticing some hooks trigger this error and cause the "parse hook names" action to error out. When I inspect the react dev tools, it outputs:

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

Following from this thread on Facebook/React issues, it seems like it might be webpack sourcemap related. Does someone have any ideas as to what could be causing this? It's happening not just with custom hooks, but standard useState and useCallback hooks in my codebase.

Solution 1:^[1]

This is indeed related to how your webpack devtool selection handle source maps.

If you want a quick fix, try updating your webpack like so:

// 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",

    // ... 
  }
}

The cheap-module-source-map has worked for me and some others here. But it isn't necessarily the only one, and it comes with some tradeoffs. If you want to experiment with other devtools and understand more, see the webpack devtool docs

Solution 2:^[2]

While I don't see the error line that you posted, this often happens to me, and it's usually fixed by updating my browser (Brave).

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Ty Hitzeman
Solution 2	DharmanBot

'React Dev Tools: "parse hook names" action throws a "Hook parsing failed" error

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]