Option+Click doesn't work with material-ui components: "Couldn't find a React instance for the element"

[Lincoln W Daniel]

Describe the bug
Option+Right-click works to open the context menu and then go to a selected component.

However, just Option+Click doesn't do anything despite showing the green border around the hovered element. This appears to only be a problem with material UI styled elements.

To Reproduce
This is a private product, so I can't share any useful code. However, the problem might be with the fact that we use MaterialUI's ("@material-ui/core": "^4.12.2",) makeStyles() for styling our components. That might mess up the logic for how you're finding the target component.

Expected behavior
It should open the target component's file in VSCode as desired.

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome
• Version 101.0.4951.54 (Official Build) (x86_64)

[Jens Duttke]

I have the same problem, not with MaterialUI, but with a Gatsby project.
It seems like some FiberNodes don't have _debugSource set:

[卧疆狂龙]

Same problem, try to replace react.development.js and react-dom.development.js

[Leonidas]

Same problem, try to replace react.development.js and react-dom.development.js

@wojiangkuanglong Good evening. I am currently facing the same issue as @Lwdthe1. Could you please elaborate with which what I shall replace react.development.js & react-dom.development.js ? And where would i typically find these files?

[Leonidas]

Hello folks, i have found a solution four your problem. I implemented @ma101an's solution. When no valid source is found the next parent element will be used as a fallback an so on until a valid source is found.

I forked the codebase to TypeScript in order to debug in my application, therefore i will provide the source code directly. I modifed src/getSourceForElement slightly:

import { getReactInstanceForElement } from "./getReactInstanceForElement"
import { getSourceForInstance } from "./getSourceForInstance"

/**
 * @typedef {import('react-reconciler').Fiber} Fiber
 */

export function getSourceForElement(element: HTMLElement) {
  const instance = getReactInstanceForElement(element)
  const source = getSourceForInstance(instance)

  if (source) return source

  // console.warn("Couldn't find a React instance for the element", element)
  // console.info("Let us try to find a React instance ancestor which has a source")

  const fallbackSource = getFirstParentElementWithSource(element)
  return fallbackSource
}

function getFirstParentElementWithSource(element: HTMLElement): any {
  const parentElement = element.parentElement
  if (parentElement === null) throw new Error("No parent found")

  const instance = getReactInstanceForElement(parentElement)
  const source = getSourceForInstance(instance)

  if (source) return source
  else return getFirstParentElementWithSource(element)
}

[Malolan]

#34

[卧疆狂龙]

Same problem, try to replace react.development.js and react-dom.development.js

@wojiangkuanglong Good evening. I am currently facing the same issue as @Lwdthe1. Could you please elaborate with which what I shall replace react.development.js & react-dom.development.js ? And where would i typically find these files?

Don't use react.production(.min).js or react.profiling(.min).js, use react.development.js