Getting zsh command not found wp-scripts error

Question

I'm setting up the React app inside WordPress (following Zac Gordon's tutorial). I have installed the wp-scripts by running npm install @wordpress/scripts and I also ran npm install but when trying to run wp-scripts start, I keep on getting error: zsh: command not found: wp-scripts

I'm not sure if zsh file needs any particular path added or how can I resolve this issue. Those are my export paths:

# export PATH=$HOME/bin:/usr/local/bin:$PATH
export PATH=$HOME/bin:/usr/local/bin:$NAME:$PATH
export PATH=$HOME/bin:/usr/local/bin:/sbin:/usr/sbin:$PATH
# Path to Composer
export PATH=$PATH:$HOME/.composer/vendor/bin
# Path to Homebrew
export PATH="/opt/homebrew/bin:$PATH" >> ~/.zshrc
echo 'export PATH="/usr/local/sbin:$PATH"' >> ~/.zshrc
# Path to Node
# export PATH="/Users/klara1/.nvm/versions/node/v16.11.1/bin:$PATH" >> ~/.zshrc
export PATH="/usr/local/sbin:$PATH"export PATH="/usr/local/sbin:$PATH"
export PATH="/usr/bin:/bin:/usr/sbin:/sbin:$PATH"
export PATH="/usr/local/sbin:$PATH"
export PATH=/bin:/usr/bin:/usr/local/bin:/sbin:${PATH}
export PATH="/usr/local/sbin:$PATH"
export PATH="/usr/local/sbin:$PATH"
export PATH="/usr/local/sbin:$PATH"
export PATH="/usr/local/sbin:$PATH"
# To customize prompt, run `p10k configure` or edit ~/.p10k.zsh.
[[ ! -f ~/.p10k.zsh ]] || source ~/.p10k.zsh
export PATH="/usr/local/sbin:$PATH"

Any idea what else needs to be done here to make it work? Any help is appreciated.

Answer 1

There are many ways to get this going but I will give you two options based on what you mentioned you did.

1. Install like so:

npm install @wordpress/scripts --save-dev

Then add these lines to your "scripts" section in package.json

"scripts": {
  "start": "wp-scripts start",
  "build": "wp-scripts build"
}

You may need to add more items as you go and can find examples on this reference page: WP packages-scripts

Now you can run the scripts you create by the name you gave it, such as "start" or "build" like so:

npm run start

2. Alternative install globally with the -g/--global option to the npm install command.

npm install -g @wordpress/scripts

And you can run the way you described as:

wp-scripts start

As "wp-scripts" gets installed as a global executable and becomes available from anywhere.