Explanation about why it stopped to work suddenly since updating the last version of NextJs

[JesusDR01]

Hello, for those who are using the latest version of Next and the extension stopped working suddenly, here is the explanation:

The NextJs team have launched recently the 14.2.13 package, so everyone with

"next": "^14.1.0", in their package.json will face the extension suddenly stopped working (as it will be updated to a newer version by using ^)

Explanation about why this issue is happening:

NextJs team updated React right before 14.1.1-canary.45 version

This update, includes the commit https://github.com/facebook/react/pull/28265

Comments from the author:

This commit is deleting _debugSource, here is the explanation of what is actually happening:

https://github.com/facebook/react/issues/29092#issuecomment-2119068029

Using NextJs Version 14.1.1-canary.44 (before the ReactJs release):

Using NextJs Version 14.1.1-canary.45 (after the ReactJs release):

As the _debugSource is not there in the 14.1.1-canary.45 version, we cannot make use of the _debugSource to open the file in vscode.

NextJs developers who updated to the last version cannot make use of the extension till new updates on react fiber.

[nandorojo]

@JesusDR01 thanks for sharing this, is there a workaround known?

[JesusDR01]

@JesusDR01 thanks for sharing this, is there a workaround known?

Just use in your package.json:

"next": "14.1.0",

Until React and React developer tools fix this in a future version

[nandorojo]

Got it, yeah I could try downgrading. That said, I wonder if there's a way to patch the source code in this repo to fix it, or if downgrading is the only option.

[nandorojo]

Next.js launched 15 an hour ago, I wonder if that fixes it

[nandorojo]

I tried Next.js 14.1.0 but I only see this:

Not sure what's up with it, I'll see if 15 helps

[nandorojo]

Looks like _debugSource is also inside of _debugOwner, so this code fixes it:

export const findFiberByHostInstance = (
  target: HTMLElement
): { _debugSource: DebugSource } | null => {
  if (!checkDevtoolsGlobalHook()) return null;

  const renderer = getDevtoolsGlobalHookRenderer();
  if (!renderer) return null;

  const fiber = renderer.findFiberByHostInstance(target) || null;

  console.log("[detectorino] fiber", fiber);

  if (fiber) {
    // nandorojo: I had to add this in to fix this
    // https://github.com/hand-dot/react-inspector/issues/9
    fiber._debugSource ??= fiber._debugOwner?._debugSource ?? null;
  }

  return fiber?._debugSource ? fiber : null;
};

[JesusDR01]

Looks like _debugSource is also inside of _debugOwner, so this code fixes it:

export const findFiberByHostInstance = (
  target: HTMLElement
): { _debugSource: DebugSource } | null => {
  if (!checkDevtoolsGlobalHook()) return null;

  const renderer = getDevtoolsGlobalHookRenderer();
  if (!renderer) return null;

  const fiber = renderer.findFiberByHostInstance(target) || null;

  console.log("[detectorino] fiber", fiber);

  if (fiber) {
    // nandorojo: I had to add this in to fix this
    // https://github.com/hand-dot/react-inspector/issues/9
    fiber._debugSource ??= fiber._debugOwner?._debugSource ?? null;
  }

  return fiber?._debugSource ? fiber : null;
};

is this using NextJs 15 or 14.1?