"canvas-sketch: command not found" after installing everything

[johndurso]

Currently going through your course on Frontend Masters and having issues getting the basics setup.

The "canvas-sketch" command is not being recognized. My NPM and Node versions meet requirements.

johndurso$ npm install canvas-sketch-cli@1.11.9 --global npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. /usr/local/Cellar/node/15.4.0/bin/canvas-sketch -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/index.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-cli -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/index.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-gif -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/ffmpeg-gif.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-mp4 -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/ffmpeg-mp4.js /+ canvas-sketch-cli@1.11.9 added 1 package from 2 contributors and updated 1 package in 18.477s

johndurso$ canvas-sketch

bash: canvas-sketch: command not found

johndurso$ npm -v

6.14.9

johndurso$ node -v

v15.4.0

I didn't see anything in the issues section of this repository that already covered this issue so I'm posting my own.

[Olgagr]

@johndurso I've just installed it as well, and it works:

npm install canvas-sketch-cli --global

It seems like not all packages are installed for you. After installing, I see I have a bunch of the other packages installed:

+ canvas-sketch-cli@1.11.12
added 623 packages from 302 contributors in 32.537s

[johndurso]

@Olgagr forgot to mention I already had "canvas-sketch-cli" installed. I uninstalled it and re-installed it. Here's what I got:

johndurso$ npm install canvas-sketch-cli --global npm WARN deprecated chokidar@2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies. npm WARN deprecated fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2. npm WARN deprecated core-js@2.6.12: core-js@<3 is no longer maintained and not recommended for usage due to the number of issues. Please, upgrade your dependencies to the actual version of core-js@3. /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-gif -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/ffmpeg-gif.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/index.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-cli -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/index.js /usr/local/Cellar/node/15.4.0/bin/canvas-sketch-mp4 -> /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/src/ffmpeg-mp4.js

> fsevents@1.2.13 install /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/node_modules/fsevents > node install.js

SOLINK_MODULE(target) Release/.node CXX(target) Release/obj.target/fse/fsevents.o SOLINK_MODULE(target) Release/fse.node`

> core-js@2.6.12 postinstall /usr/local/Cellar/node/15.4.0/lib/node_modules/canvas-sketch-cli/node_modules/core-js > node -e "try{require('./postinstall')}catch(e){}"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon: > https://opencollective.com/core-js > https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)

+ canvas-sketch-cli@1.11.12 added 623 packages from 302 contributors in 40.895s

johndurso$ canvas-sketch bash: canvas-sketch: command not found

[fturcheti]

@johndurso What's the output of npm config get prefix? And what's in your path — echo $PATH?

[johndurso]

npm config get prefix outputs: /usr/local/Cellar/node/15.4.0

echo $PATH outputs: /Library/Frameworks/Python.framework/Versions/3.9/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Library/Frameworks/Python.framework/Versions/3.9/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin

[fturcheti]

Can you try this npm config set prefix /usr/local?

[johndurso]

THAT WORKED! Thank you so much @fturcheti!

Any chance you could briefly explain how this fixed the issue? If not, no worries! Just happy this is working now :)

[mattdesl]

I've heard of some students running into similar issues, where the "environment variable" that allows global scripts to run is somehow not pointing to the correct folder. It looks like @fturcheti's solution helps point the path to the right folder. I should really start to collect some of these tricks into a TROUBLESHOOTING type of doc (any PRs more than welcome :smile:).

Another approach that I've found works for many students, without having to deal with any headaches of global installation, is to install it locally and use npx or run scripts to invoke canvas sketch:

# create and move to a new folder with package.json 
mkdir my-sketches
cd my-sketches
npm init -y

# in that same folder, install the tool locally
npm install canvas-sketch-cli --save-dev

# run with 'npx' to make sure you get the local CLI
npx canvas-sketch-cli sketches/foo.js

[fturcheti]

@johndurso Your installation process was apparently correct but the command wasn't being found, so I thought it should be a problem with your $PATH.

Then I found the solution here: https://stackoverflow.com/a/14840304

Run this:

npm config get prefix

The default on OS X is /usr/local, which means that npm will symlink binaries into /usr/local/bin, which should already be on your PATH (especially if you're using Homebrew).

So:

npm config set prefix /usr/local if it's something else

[johndurso]

@fturcheti appreciate your help, more than you know!

@mattdesl that sounds like a really good idea!

Helps a lot having a wonderful, responsive community! I was a little worried when I saw some issues not have responses for a couple months but being able to have my issue taken care of in 5 days is awesome. :)

[Teddy-oss-design]

Hello, I have installed on macOS bigsur 11.6.7 noode.js (v18.4.0) and npm (8.12.1). Then from my terminal I ran the command 'npm install canvas-sketch-cli -g'; and I have this error message:

teddytannous@iMac-de-Teddy ~ % npm install canvas-sketch-cli -g npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/canvas-sketch-cli npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/canvas-sketch-cli' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/canvas-sketch-cli'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/canvas-sketch-cli' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/teddytannous/.npm/_logs/2022-06-27T12_22_40_854Z-debug-0.log

Can you please help me to solve the problem. Thanks again.

[Teddy-oss-design]

Hello, I have installed on macOS bigsur 11.6.7 noode.js (v18.4.0) and npm (8.12.1). Then from my terminal I ran the command 'npm install canvas-sketch-cli -g'; and I have this error message:

teddytannous@iMac-de-Teddy ~ % npm install canvas-sketch-cli -g npm ERR! code EACCES npm ERR! syscall mkdir npm ERR! path /usr/local/lib/node_modules/canvas-sketch-cli npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/canvas-sketch-cli' npm ERR! [Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/canvas-sketch-cli'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'mkdir', npm ERR! path: '/usr/local/lib/node_modules/canvas-sketch-cli' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/teddytannous/.npm/_logs/2022-06-27T12_22_40_854Z-debug-0.log

Can you please help me to solve the problem. Thanks again.

Hello, I found the solution, it was a rights problem with user, administrator. I put the command: 'sudo npm install canvas-sketch-cli -g', and everything is ok Have a good day.

[maxmason007]

Hey all, I've tried installing and I've ended up with the below error message. Im running node v16.16.0 and npm v8.11.0. Tried several solutions posted but its still giving me this message and the command to create a new js file doesnt work. Any help much appreciated :)

npm WARN config global --global, --local are deprecated. Use --location=global instead. npm ERR! code EACCES npm ERR! syscall rename npm ERR! path /usr/local/lib/node_modules/canvas-sketch-cli npm ERR! dest /usr/local/lib/node_modules/.canvas-sketch-cli-EDuEFgSR npm ERR! errno -13 npm ERR! Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/canvas-sketch-cli' -> '/usr/local/lib/node_modules/.canvas-sketch-cli-EDuEFgSR' npm ERR! [Error: EACCES: permission denied, rename '/usr/local/lib/node_modules/canvas-sketch-cli' -> '/usr/local/lib/node_modules/.canvas-sketch-cli-EDuEFgSR'] { npm ERR! errno: -13, npm ERR! code: 'EACCES', npm ERR! syscall: 'rename', npm ERR! path: '/usr/local/lib/node_modules/canvas-sketch-cli', npm ERR! dest: '/usr/local/lib/node_modules/.canvas-sketch-cli-EDuEFgSR' npm ERR! } npm ERR! npm ERR! The operation was rejected by your operating system. npm ERR! It is likely you do not have the permissions to access this file as the current user npm ERR! npm ERR! If you believe this might be a permissions issue, please double-check the npm ERR! permissions of the file and its containing directories, or try running npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/maxmason/.npm/_logs/2022-07-14T19_58_08_264Z-debug-0.log

[maxmason007]

Also, I tried using Teddy-oss-designs solution and I received this error message too.

npm WARN config global --global, --local are deprecated. Use --location=global instead. npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

[MatthewProjects]

hello I am getting this message... what do I do

Last login: Sun Dec 11 19:26:33 on ttys000 matthewtroughton@Matts-Air-3 ~ % npm install canvas-sketch-cli --global

npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead. npm WARN deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

changed 534 packages, and audited 535 packages in 26s

64 packages are looking for funding run npm fund for details

found 0 vulnerabilities matthewtroughton@Matts-Air-3 ~ %

[MatthewProjects]

why am I getting this message ? /Users/matthewtroughton/.npm-global matthewtroughton@Matts-Air-3 ~ % npm update -gf

npm WARN using --force Recommended protections disabled. npm ERR! code EINVALIDPACKAGENAME npm ERR! Invalid package name ".DS_Store" of package ".DS_Store@*": name cannot start with a period.

npm ERR! A complete log of this run can be found in: npm ERR! /Users/matthewtroughton/.npm/_logs/2022-12-12T02_41_16_302Z-debug-0.log matthewtroughton@Matts-Air-3 ~ %