6
votes

I'm trying to set up debugging with vscode on a nuxt project using:

https://medium.com/@justin.ramel/nuxt-js-debugging-in-visual-studio-code-822ff9d51c77

I've gotten as far as :

$ npm run dev-debug

> [email protected] dev-debug E:\ENVS\js\nuxt4
> node --inspect node_modules/.bin/nuxt

Debugger listening on ws://127.0.0.1:9229/6f869cb6-7166-4182-b841-a528917d88fd
For help, see: https://nodejs.org/en/docs/inspector
E:\ENVS\js\nuxt4\node_modules\.bin\nuxt:2
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
        ^^^^^^^

SyntaxError: missing ) after argument list
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-debug: `node --inspect node_modules/.bin/nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

The entire nuxt file is :

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case `uname` in
    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
esac

if [ -x "$basedir/node" ]; then
"$basedir/node"  "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
else 
node  "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
fi
exit $ret

Edit:

I tried making the changes and got:

> node --inspect node_modules/.bin/nuxt

Debugger listening on ws://127.0.0.1:9229/458bafd6-1d8c-4a2b-8ec2-5ddc8b4f0fda
For help, see: https://nodejs.org/en/docs/inspector
E:\ENVS\js\nuxt4\node_modules\.bin\nuxt:1
(function (exports, require, module, __filename, __dirname) {   #!/bin/sh
                                                                ^

SyntaxError: Invalid or unexpected token
    at new Script (vm.js:83:7)
    at createScript (vm.js:267:10)
    at Object.runInThisContext (vm.js:319:10)
    at Module._compile (internal/modules/cjs/loader.js:684:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Function.Module.runMain (internal/modules/cjs/loader.js:774:12)
    at executeUserCode (internal/bootstrap/node.js:342:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev-debug: `node --inspect node_modules/.bin/nuxt`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev-debug script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

How do I get this working?

5

5 Answers

3
votes

In my case I was using the wrong path in my package.json:

It didn't work when I had it like this:

"scripts": {
  ...
  "dev-debug": "node --inspect node_modules/.bind/nuxt,
  ...
}

However it did work when I changed to the correct path:

"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt.js",
2
votes

I have a partial explanation and a fix that should work for some people.

The cause

The root cause of the problem is that node got a Bash or Windows shell script as an argument. If you look into the files in .bin such as node_modules\.bin\nuxt, you will realize that these are actually shell scripts which are supposed to return the real path to the JavaScript file which is supposed to be passed to node as an argument.

I don't know how this is even supposed to work under Linux, but I've had this problem happen when using git-bash while using the same codebase on a Linux VM worked just fine, so it's definitely environment-specific. If anyone has the answer to this, I'll be happy to add it to the question.

The solution

Do not pass the file in .bin to node. Instead find the path to the real file and pass that instead. In this case, it's node_modules/nuxt/bin/nuxt.js and many libraries follow the same principle, but it can be a bit tricky to find sometimes, for example Angular was in node_modules/@angular/cli/bin/ng on my system.

A word of caution

This solution bypasses the way the JavaScript files are located and may stop working after an update of a library. Or it may not work on all systems. I'm not a node developer and only found it while trying to run someone else's code. It was a good enough solution for my use case, but may not be good for you.

1
votes

Worked like this

"dev-debug": "node --inspect node_modules/nuxt/bin/nuxt.js",

The reason of why I'm using this approach it's because of this open issue #8730 with Nuxt. Source maps are not being used by the VsCode native debugger (on Nuxt Server Side / Static Generator || Universal App).

If your Nuxt App is an SPA, no problems.

1
votes

I was using below configuration in package.json file

"scripts": {
  "test": "node --inspect node_modules/.bin/cross-env API_HOST=url ember serve",
}

The above config work for the Linux machine. But I have a windows machine and during npm run test I got this error.

In my case when I removed node --inspect than its work for me.

"test": "node_modules/.bin/cross-env API_HOST=url ember serve",
1
votes

Im not sure whether this is the problem, but still try this. Like i have encountered some weird errors in the past while using legacy backticks ``.

Use $(...) notation instead of legacy backticked `...`

#!/bin/sh
basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")

case $(uname) in
    *CYGWIN*) basedir=$(cygpath -w "$basedir");;
esac

if [ -x "$basedir/node" ]; then
"$basedir/node"  "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
else 
node  "$basedir/../nuxt/bin/nuxt.js" "$@"
ret=$?
fi
exit $ret