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

Question

When I inspect my code using the react dev tools, 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 source map 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.

EDIT: I played around with webpack's devtool setting with multiple values, but the issue persisted. The issue is gone for now on my codebase, but it intermittently shows itself up making it hard to reproduce. Leave question open until there's hard evidence explaining what's causing this.

Socorrosocotra

What webpack devtool are you using? Switching to cheap-module-source-map fixed a similar issue for me – Puckett

Tks @TyHitzeman! It's works for me! – Nobel

@TyHitzeman How do you switch it? I am using create react app and cant find the webpack config – Pericynthion

@Pericynthion Updating CRA's webpack config is discussed here: #63280609 Once you can update your webpack config, see the devtool section of the docs: webpack.js.org/configuration/devtool – Puckett

@TyHitzeman That actually fixed this issue for me as well, it would be great if you could post it as an answer for everyone's benefit :) – Lining

I can't find the right place to modify the webpack config, do I need to install the react-script or just simple modify the contents in the next.config.js? – Foxtrot

Answer 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

Puckett

I just ran into this issue again yesterday and tried playing around with different devtool options in webpack, but I'm afraid the issue did not go away. – Socorrosocotra

Answer 2

for the data you use please add this value

(your input data) || [];

please try this solution and add (OR []) as a bove because often i face this problem and this occurs when your app starts and does not find any data at the start of running.

Needlefish

Answer 3

I think you should check your dependencies and upgrade them to latest version.

Drive

Answer 4

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).

Griz