Skip to content

Sourcemaps are ignored when debugging the plugin locally in VS Code #304

@Maximaximum

Description

@Maximaximum

Hi! First of all, thanks for all the hard work on gql.tada! It's an awesome tool.

I guess this might not be the proper place to ask this question, but I've honestly spent 2 days trying to find out the reason for the issue with no success, so I'd really appreciate any help or guidance.

I want to play around with the plugin and, potentially, implement some minor useful functionality (like adding support for the "Go to definition" command for fragments, adding a refactoring for renaming a fragment etc). The problem I've stumbled upon, though, is that the sourcemaps don't seem to be working while trying to debug the plugin locally.

Steps to reproduce

  1. Clone the repo locally into the D:\Projects\3rd-parties\gqlsp2 folder
  2. Run pnpm i at the root
  3. Call set TSS_DEBUG_BRK=9559 && code packages/example to open the Example VS Code instance
  4. In the Example VS Code instance run pnpm i
  5. Ensured that the Workspace version of Typescript is used in both VS Code instances
  6. Set a breakpoint in the Root VS Code instance's packages\graphqlsp\src\index.ts file, (for instance, at the first line of the getCompletionsAtPosition() method)
  7. Attach to the Example VS Code instance for debugging
  8. Trigger the getCompletionsAtPosition() method from the Example VS Code instance (by typing characters in the gql template literal)

Expected result

The breakpoint set in packages\graphqlsp\src\index.ts should be hit.

Actual result

Attaching the debugger has been successful. However, the breakpoint set on packages\graphqlsp\src\index.ts remains unbound and, therefore, not hit.

However, setting the breakpoint on the corresponding location in the node_modules\.pnpm\[email protected]\node_modules\@0no-co\graphqlsp\dist\graphqlsp.js file does work. The breakpoint gets hit whenever the method is called.

Obviously, there is some kind of a problem with VS Code reading the sourcemaps, but I haven't been able to find out what is wrong specifically and how to fix / work around this issue. Any help would be appreciated.

Screenshots

imagesd
Proper sourcemappingUrl set in the output file

image
Breakpoint successfully working in the output file

image
Breakpoint NOT working in the source file

image
Proper output files, including sourcemaps are being output, but not handled by VS Code for some reason

Software versions

Windows 10 Pro x64
VS Code 1.88.1
NodeJS 20.12.1
pnpm 8.15.7

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions