40

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.

React Dev Tools react dev tools error

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.

Improve this question
6
  • 3
    What webpack devtool are you using? Switching to cheap-module-source-map fixed a similar issue for me Commented Feb 13, 2022 at 18:23
  • Tks @TyHitzeman! It's works for me! Commented Mar 9, 2022 at 14:37
  • @TyHitzeman How do you switch it? I am using create react app and cant find the webpack config Commented Mar 22, 2022 at 19:13
  • 1
    @polvoazul Updating CRA's webpack config is discussed here: stackoverflow.com/questions/63280109/… Once you can update your webpack config, see the devtool section of the docs: webpack.js.org/configuration/devtool Commented Mar 25, 2022 at 18:03
  • 1
    @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 :) Commented May 24, 2022 at 10:04

4 Answers 4

Reset to default
2

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

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

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.

Improve this answer

Comments

-1

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

Improve this answer

Comments

-5

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

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.