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

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@❤️ 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.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (1 by maintainers)

Most upvoted comments

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 😄).

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

mattdesl on Jan 12, 2021

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

fturcheti on Jan 12, 2021

@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

fturcheti on Jan 12, 2021

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

fturcheti on Jan 12, 2021

@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

Olgagr on Jan 12, 2021