VSCODE & GitHub Desktop pre-commit hook: npx: command not found

Question

I am starting a new repo, thinking I should use the most recent Huksy v6 which is installed from LintStaged using their setup guide:

npx mrm lint-staged

// package.json updated with:
"husky": ">=6",
"lint-staged": ">=10",

This adds necessary packages and adds the husky files including the precommit files:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

When i run my commit in the terminal it works fine. However, if I try to run my commit in GitHub Desktop or VSCode (which I know some teammates do), it results in an error for both:

npx: command not found. husky - pre-commit hook exited with code 127 (error)

I have npx installed:

npx -v
// 6.14.10

If I try to install in globall, such as described in other StackOverflow suggestions, it returns a warning about existing location (with & with out sudo):

ERR! EEXIST: file already exists, symlink '../lib/node_modules/npx/index.js' -> '/Users/plucks/.nvm/versions/node/v14.15.4/bin/npx' npm ERR! File exists: /Users/plucks/.nvm/versions/node/v14.15.4/bin/npx npm ERR! Remove the existing file and try again, or run npm npm ERR! with --force to overwrite files recklessly.

Is there anything I can do so the programs like VSCode & GitHub Desktop can run?

Eaglet

Answer 1

I had to combine the answers of Cathal and Misol.

I did not want to edit the .husky/pre-commit like Cathal for two reasons:

1. I would need to that for every project I use husky in
2. It would actually break husky for my fellow developers on Windows

So I added a global ~/.huskyrc file like Misol did with the following contents:

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

Evadne

Works like a charm, very nice. – Xerophthalmia

this is the only solution which worked for both VSCode & Github Desktop for me – Eaglet

where you added this file which directory – Divagate

As mentioned in my answer it's in the home folder. That what tilde (~) means. You can read more about that here: gnu.org/software/bash/manual/html_node/Tilde-Expansion.html – Evadne

Answer 2

I've got the solution from here. Hope you can find it as well!

• https://typicode.github.io/husky/#/?id=command-not-found
• https://github.com/typicode/husky/issues/912

Here it is, for clarity:

• add a file ~/.huskyrc if you don't have one already
• make sure it includes the following:

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

Rockandroll

Prefer to add this into .husky/pre-commit because you can share it via git – Landel

Answer 3

Before adding any modifications to your project try restarting your IDE as mentioned in this issue

Tomfool

I highly recommend other people try this first. This worked for me and saved a lot of hassle of not having to write a bunch of bash scripting or custom configuring. – Phallus

Yes restarting fixed it for me as well, it was working fine for me with VS Code and started breaking for me all of a sudden, I tried reloading the window that didn't work out but if you restart the IDE that fixes it. – Cholinesterase

This response should be on the top! Thanks sir, I was about to go crazy on this issue! – Nebulize

I had this issue with GitHub Desktop on macOS after updating xcode, and restarting it fixed it for me as well. – Crossbench

Answer 4

As per this suggestion, adding the following to your pre-commit file should fix it:

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

So the full file would look like this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

export NVM_DIR="$HOME/.nvm/nvm.sh"
. "$(dirname $NVM_DIR)/nvm.sh"

export NVM_DIR="$HOME/.nvm"
a=$(nvm ls | grep 'node')
b=${a#*(-> }
v=${b%%[)| ]*}

export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"

npm run test

Soundless

Thanks for this! I'm running Ubuntu and added that first block of text to ~/.huskyrc and fixed the issue when doing a commit from GitHub Desktop. – Draught

what if you dont use nvm? – Hotchpot

Answer 5

For husky>=6: update your .husky/pre-commit file to contain this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

npx lint-staged

This will find and expose the current node path and therefore npx path that you are using, which has been configured with Node Version Manager nvm

Feeze

Answer 6

For those using fnm instead of nvm, adding the following to ~/.huskyrc worked for me:

eval "$(fnm env)"

Alvira

Answer 7

If you are working on a team with other people who may have installed nvm or node in slightly different fashion than you have, I would not recommend adding any export statements or edits to the $PATH in your .husky/precommit or ~/.huskyrc files.

If you want your VSCode to have proper access to the $PATH you expect from terminal you should always launch VSCode from terminal in the folder you are working from.

For example, in a terminal window:

~/_git/my_project: code .

Will launch VSCode with my_project open in a new window (it should remember your tabs and window state from the last time you worked on your project).

VSCode will now use the $PATH your terminal uses from your ~/.zshrc or ~/.bashrc, etc.

With this setup my .husky/precommit looks like this:

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

and my my .lintstagedrc.json looks like this:

{
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix --debug --max-warnings=-1",
    "npm run lint:prettier-fix"
  ],
  "*.{css,less,sass,scss}": ["npm run lint:prettier-fix"],
  "*.{g?(raph)ql,json,html,md,y?(a)ml}": ["npm run lint:prettier-fix"]
}

Keddah

This answer is unhelpful. People aren't going to only ever launch VSCode and Github Desktop via CLI from a project folder. – Harlotry

Answer 8

The other suggestions are fine until you have only one node version if you have two node versions and in one of them you don't have the yarn, you will face this issue, so do a simple change

# ~/.huskyrc
# This loads nvm.sh and sets the correct PATH before running hook
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# This take the current active node version you want to verify the hook
export NVM_DIR="$HOME/.nvm"
a=$(nvm current)

export PATH="$NVM_DIR/versions/node/$a/bin:$PATH"

Legnica

Answer 9

I've found adding this worked to get past the error

unset ELECTRON_RUN_AS_NODE

My pre-push looks like this

unset ELECTRON_RUN_AS_NODE

npm run cy

However, this is still not working as I'm getting a git "failed to push some refs to remote" error. I confirmed that there are no remote changes so something else was messed up by doing this. I may just have to give up on the husky pre-push for now.

Gebelein

Answer 10

Open VSCode settings and set the Inherit Env setting (Terminal > Integrated: Inherit Env) to false:

"terminal.integrated.inheritEnv": false

This setting enables or disables whether new shells should inherit their environment from VS Code.

Tool

Answer 11

I change code as the top answer says. But it doesn't works at first, and then reopen VScode and it works.

In the terminal, I input these commands:

1. copy this command in terminal and press enter.

vi ~/.huskyrc

2. copy this command in terminal.

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

3. input :wq to quit edit state

4. reopen VScode.

Disparagement