Home
Support Forums

Recommended VS Code config for netlify dev does not work

distracted-ptolemy-951d10.netlify.app
intiortega.com

My objective was to get breakpoints that I’m used to having trigger either in VS Code or in the Firefox developer console when source maps are included working when using Netlify Dev. Either is fine, but for now I have been trying to get this VS Code launch.json config working (obtained from Netlify here: Debugging with Visual Studio Code):

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "netlify dev",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["dev"],
      "console": "integratedTerminal",
      "env": { "BROWSER": "none" },
      "serverReadyAction": {
        "pattern": "Server now ready on (https?://[\w:.-]+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "netlify functions:serve",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["functions:serve"],
      "console": "integratedTerminal"
    }
  ]
}

The following error occurs:

Debugger attached.
Waiting for the debugger to disconnect…

C:\Users\these\Desktop\website\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

I understand the error, but not how to fix it given the file in question is Netlify’s. Is there a solution to this problem? I’m very new to all this so I could very easily be doing something else wrong.

Hey there! Just following up to share the advice that I posted in your Helpdesk ticket, for other users who may stumble upon this.

  • Try to reproduce this with a very simple “hello world” site
  • Ensure that all dependencies, the CLI etc, are up-to-date

Hi. I had the exact same problem. Just set up debugging in VSCode using launch.config file. In my package.json file I had

{
“scripts”: {
“debug”: “netlify dev --inspect”,
}
}

I found a solution for anyone whose circumstances resemble my own. Credit also goes to mossrobert942 whose post above had a key addition that makes this work. I’m using the Next framework in conjunction with Netlify using VS Code as the IDE. Netlify Dev will work while allowing breakpoints to be set and triggered within VS Code if desired. I ended up having to replace the program entry in the first configuration in this code:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "netlify dev",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["dev"],
      "console": "integratedTerminal",
      "env": { "BROWSER": "none" },
      "serverReadyAction": {
        "pattern": "Server now ready on (https?://[\w:.-]+)",
        "uriFormat": "%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "netlify functions:serve",
      "type": "node",
      "request": "launch",
      "skipFiles": ["<node_internals>/**"],
      "outFiles": ["${workspaceFolder}/.netlify/functions-serve/**/*.js"],
      "program": "${workspaceFolder}/node_modules/.bin/netlify",
      "args": ["functions:serve"],
      "console": "integratedTerminal"
    }
  ]
}

with the following entry:
"program": "${workspaceFolder}/node_modules/netlify-cli/bin/run".

I had to do this because the original program entry:

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
case `uname` in
    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
  exec "$basedir/node"  "$basedir/../netlify-cli/bin/run" "$@"
else
  exec node  "$basedir/../netlify-cli/bin/run" "$@"
fi

caused this error:

C:\Users\these\Desktop\website\node_modules\.bin\netlify:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
          ^^^^^^^

SyntaxError: missing ) after argument list
    at wrapSafe (internal/modules/cjs/loader.js:1001:16)
    at Module._compile (internal/modules/cjs/loader.js:1049:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12)
    at internal/main/run_main_module.js:17:47

This parsing error does not occur for the replacement program entry:

#!/usr/bin/env node

require('..').run()
.catch(require('@oclif/errors/handle'))

and through correspondence with support, is supposed to be what the original program entry in launch.json file contains anyways.

The final step that may be required is to add the following script entry to your package.json (I’m assuming top level, but my project is small so this is the only one I have):

"debug": "netlify dev --inspect"

otherwise you will get another error that I could not reproduce. I suspect the first time you try this solution without final step, it fails, but for whatever reason, subsequent launches of the debugger succeed even without this final step. I don’t know why this would be or if this is even what’s happening(again, beginner here), but, just in case, try this final step if you still get an error after modifying launch.json.

Apologies for length of this solution, I don’t have enough experience to be very precise so I had to compensate with over-explanation I suppose.

1 Like