Link to the three example in default template doesn't resolve

[saadkhalid90]

I use the recommended command to open a threejs template

npx canvas-sketch-cli --new --template=three --open

But I do get an error Can't walk dependency graph: Cannot find module 'three/examples/js/controls/OrbitControls' from 'sketches/2023.02.14-21.21.44.js'

I checked the three module it has a jsm folder and not a js folder. Any recommended solution?

[nikitaourazbaev]

Running into this as well, seems related to https://github.com/mattdesl/canvas-sketch/issues/149 as three has now switched to esm.

Modifying the version of three installed and downgrading it to version 0.93.0 will probably make it work with canvas-sketch but not sure if it's a good idea due to security vulnerabilities, etc.

[m-shum]

Running into the same issue (working through the frontendmasters course by Matt).

Command: canvas-sketch webgl.js --new --template=three Response:

Error: Can't walk dependency graph: Cannot find module 'three/examples/js/controls/OrbitControls' from 'webgl.js'
    required by /Users/michael/Personal/generative-coding/webgl.js
    at /Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/esmify/esmify.js:47:19
    at /Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/browser-resolve/index.js:265:24
    at /Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/resolve/lib/async.js:148:17
    at processDirs (/Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/resolve/lib/async.js:299:39)
    at isdir (/Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/resolve/lib/async.js:306:32)
    at /Users/michael/.nvm/versions/node/v19.2.0/lib/node_modules/canvas-sketch-cli/node_modules/resolve/lib/async.js:34:69
    at FSReqCallback.oncomplete (node:fs:198:21) {
  stream: [Labeled]

[mattdesl]

This is fixed in the latest version of the CLI, by using a fixed version of ThreeJS. Not the most ideal solve, but unfortunately it looks like there are some bugs in the ESM parsing, and I don't really want to wade into that rabbit hole. An ideal fix would be to replace the internal browserify bundling with esbuild (which didn't exist a few years ago) but I've been putting it off as it's a big undertaking.

To fix, you can do the following in your package that already exists:

npm install three@0.147.0 --save

To get the latest version of the CLI so that you don't hit this issue on new sketches, install it like this (if you're using it locally or with npx) -

npm i canvas-sketch-cli@1.11.21 --save-dev    

If you've been using canvas-sketch-cli globally, this is how you update:

npm i canvas-sketch-cli@1.11.21 --global

[saadkhalid90]

Thanks so much Matt. Thanks for creating this and the coursework to guide us on its usage