GraphQLSP icon indicating copy to clipboard operation
GraphQLSP copied to clipboard

Sourcemaps are ignored when debugging the plugin locally in VS Code

Open Maximaximum opened this issue 1 year ago • 1 comments

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

Maximaximum avatar Apr 25 '24 12:04 Maximaximum

Another note: sourcemaps for debugging a clean TSServer plugin template work well on the same machine https://github.com/orta/TypeScript-TSServer-Plugin-Template/tree/main

Maximaximum avatar Apr 26 '24 06:04 Maximaximum