After react devtools version 5.0, when you click Open in editor, you cannot jump to the line of the file corresponding to vscode

[zhouhaizhou]

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[varemenos]

bump.

I've tried both "Open with VSCode" and custom url path but it just opens a alert saying:

"Path does not exist"

The path '/data:application/json;base64,{REDACTED BASE64}/{REDACTED FILENAME}.tsx:27' does not exist on this computer.

[donaldpipowitch]

I have the same problem. It happens with a custom URL, but also with the built in VS Code option. I don't think that base64 encoded url is correct 🤔

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[varemenos]

bump

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[zthxxx]

bump

[varemenos]

So I installed the devtools locally and tried to do some debugging.

It seems like there is a function called checkConditions in packages/react-devtools-shared/src/devtools/views/Components/OpenInEditorButton.js that determines whether the button will be enabled or disabled and where it will point at (it's return type signature is something among the lines of: { url: string | null, shouldDisableButton: true }).

In my case at least, the button is disabled because the sourceURL looks like this: http://localhost:3000/src/ui/Component.tsx:44. And since it sourceURL.includes('://'), the code branches out to the following code:

    if (sourceURL.includes('://')) {
      if (!__IS_INTERNAL_VERSION__) {
        // In this case, we can't really determine the path to a file, disable a button
        return {url: null, shouldDisableButton: true};
      } else {
        const endOfSourceMapURLPattern = '.js/';
        const endOfSourceMapURLIndex = sourceURL.lastIndexOf(
          endOfSourceMapURLPattern,
        );

        if (endOfSourceMapURLIndex === -1) {
          return {url: null, shouldDisableButton: true};
        } else {
          sourceURL = sourceURL.slice(
            endOfSourceMapURLIndex + endOfSourceMapURLPattern.length,
            sourceURL.length,
          );
        }
      }
    }

and the only way out and back in the normal flow is if endOfSourceMapURLIndex === -1 is false.

But for my current local build at least, the __IS_INTERNAL_VERSION__ flag is false which then ends up returning return {url: null, shouldDisableButton: true};...