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.

What webpack `devtool` are you using? Switching to `cheap-module-source-map` fixed a similar issue for me — Tyler Dane, Feb 13 '22 at 18:23
@TyHitzeman How do you switch it? I am using create react app and cant find the webpack config — polvoazul, Mar 22 '22 at 19:13
@polvoazul Updating CRA's webpack config is discussed here: https://stackoverflow.com/questions/63280109/how-to-update-webpack-config-for-a-react-project-created-using-create-react-app Once you can update your webpack config, see the `devtool` section of the docs: https://webpack.js.org/configuration/devtool/ — Tyler Dane, Mar 25 '22 at 18:03
@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 :) — Sumit, May 24 '22 at 10:04
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`? — Reacher, Oct 20 '22 at 16:36

score 0 · Answer 1 · answered May 25 '22 at 17:00

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

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. — sgarcia.dev, Jul 19 '22 at 15:56

score 0 · Answer 2 · answered Mar 14 '23 at 07:58

0

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.

answered Mar 14 '23 at 07:58

Ahmed abdelmeguid

11
2

score -4 · Answer 3 · edited Apr 16 '22 at 15:45

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

edited Apr 16 '22 at 15:45

DharmanBot

1,066
2
6
10

answered Apr 15 '22 at 20:02

Brian Nicholls

17
1
7

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

3 Answers3