VSCode Gatsy Debug Error with SourceMaps

Question

I was trying to set up VSCode to be able to debug Gatsby code. I am new to Javascript sourcemaps which seem to be the cause of the problem.

I am seeing the following error on launch:

Cannot launch program "c:\Gatsby\myprogram\node_modules\.bin\gatsby" because corresponding Javascript cannot be found.

I verified that the path to the file gatsby in the error exists.

This is the file that I am using for launch.json:

  "version": "0.2.0",
  "configurations": [
    {
    "name": "Launch",
    "type": "node",
    "request": "launch",
    "protocol": "inspector",
    "program": "${workspaceRoot}/node_modules/.bin/gatsby",
    "args": ["develop", "-p", "7777"],
    "stopOnEntry": false,
    "cwd": "${workspaceRoot}",
    "preLaunchTask": null,
    "runtimeExecutable": null,
    "runtimeArgs": [
      "--nolazy"
    ],
    "env": {
      "NODE_ENV": "development",
      "DEBUG": "gatsby:*"
    },
    "console": "integratedTerminal",
    "sourceMaps": true,
    "outFiles": []
   }
  ]
}

score 1 · Answer 1 · answered Jul 29 '18 at 06:59

I was able to get this working by using globally installed gatsby-cli's gatsby instead of the one in node_modules. So:

npm install --global gatsby-cli

and then (since I use node/npm etc under nvm):

    {
        "type": "node",
        "request": "launch",
        "name": "Launch 'gatsby develop'",
        "protocol": "inspector",
        "program": "${env:HOME}/.nvm/versions/node/v8.11.3/bin/gatsby",
        "args": [
            "develop"
        ],
        "stopOnEntry": false,
        "cwd": "${workspaceRoot}",
        "preLaunchTask": null,
        "runtimeExecutable": null,
        "runtimeArgs": [
            "--nolazy"
        ],
        "env": {
            "NODE_ENV": "development",
            "DEBUG": "gatsby:*"
        },
        "console": "integratedTerminal",
        "sourceMaps": true,
        "outFiles": []
    }

worked for me. I'm on OSX though, more changes may be needed for your Windows setup.

Also: to use node under nvm with VSCode, I used the default alias method from here: Visual Studio Code to use node version specified by NVM

score 0 · Answer 2 · answered Sep 29 '22 at 12:17

Quoted from the documentation

VS Code Debugger (Auto-Config)

Using VS Code’s integrated terminal run node --nolazy node_modules/.bin/gatsby develop --inspect-brk instead of gatsby develop or node --nolazy --inspect-brk node_modules/.bin/gatsby build instead of gatsby build

VS Code Debugger (Manual Config)

Linux

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["develop"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "args": ["build"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    }
  ]
}

Windows

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Gatsby develop",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["develop"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    },
    {
      "name": "Gatsby build",
      "type": "pwa-node",
      "request": "launch",
      "program": "${workspaceRoot}/node_modules/.bin/gatsby",
      "windows": {
        "program": "${workspaceRoot}/node_modules/gatsby/dist/bin/gatsby"
      },
      "args": ["build"],
      "env": {
        "PARCEL_WORKERS": "0",
        "GATSBY_CPU_COUNT": "1",
      },
      "runtimeArgs": ["--nolazy"],
      "console": "integratedTerminal"
    }
  ]
}

VSCode Gatsy Debug Error with SourceMaps

2 Answers2