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.

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.

• javascript
• reactjs
• react-hooks
• react-devtools

• 3 What webpack devtool are you using? Switching to cheap-module-source-map fixed a similar issue for me – Tyler Dane Commented Feb 13, 2022 at 18:23
• Tks @TyHitzeman! It's works for me! – LuanLuanLuan 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 – polvoazul 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 – Tyler Dane 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 :) – Sumit Commented May 24, 2022 at 10:04

4 Answers 4

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

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.

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

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