Cannot install JSDOM with Kit

[danawoodman]

Describe the bug

I am attempting to add JSDOM to a Kit app in order to do some simple web scraping in one of my routes. JSDOM fails with the following errors when attempting to import:

ENOENT: no such file or directory, open '__vite-optional-peer-dep:canvas:jsdom'
Error: ENOENT: no such file or directory, open '__vite-optional-peer-dep:canvas:jsdom'
    at Object.openSync (node:fs:599:3)
    at Object.readFileSync (node:fs:467:35)
    at Module._extensions..js (node:internal/modules/cjs/loader:1136:18)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/danawoodman/code/repros/sk-jsdom/node_modules/jsdom/lib/jsdom/utils.js:158:18)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)

Installing canvas gets me:

dlopen(/Users/danawoodman/code/repros/sk-jsdom/node_modules/canvas/build/Release/canvas.node, 0x0001): symbol not found in flat namespace (_cairo_fill)
Error: dlopen(/Users/danawoodman/code/repros/sk-jsdom/node_modules/canvas/build/Release/canvas.node, 0x0001): symbol not found in flat namespace (_cairo_fill)
    at Module._extensions..node (node:internal/modules/cjs/loader:1203:18)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)
    at Module.require (node:internal/modules/cjs/loader:1021:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at Object.<anonymous> (/Users/danawoodman/code/repros/sk-jsdom/node_modules/canvas/lib/bindings.js:3:18)
    at Module._compile (node:internal/modules/cjs/loader:1119:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1173:10)
    at Module.load (node:internal/modules/cjs/loader:997:32)
    at Module._load (node:internal/modules/cjs/loader:838:12)

I've attempted alternatives to JSDOM like happy-dom and linkedom but neither can handle the HTML I'm scraping.

I created a repro with Vanilla Vite using their generator and importing JSDOM works fine, so I am assuming this has something to do with Kit?

Here is the relevant line in my repro.

Reproduction

https://github.com/danawoodman/sveltekit-jsdom-repro

Logs

see above

System Info

System:
    OS: macOS 12.5.1
    CPU: (8) x64 Apple M2
    Memory: 18.66 MB / 24.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.9.0 - ~/.asdf/installs/nodejs/18.9.0/bin/node
    npm: 8.19.1 - ~/.asdf/plugins/nodejs/shims/npm
  Browsers:
    Brave Browser: 105.1.43.89
    Chrome: 105.0.5195.125
    Firefox: 103.0
    Safari: 15.6.1
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.80 
    @sveltejs/kit: next => 1.0.0-next.503 
    svelte: ^3.44.0 => 3.50.1 
    vite: ^3.1.0 => 3.1.3

Severity

blocking all usage of SvelteKit

Additional Information

I've attempting a pretty exhaustive search but cannot find any bugs related to this on Vite or JSDOM and since it works with Node and Vite alone, I'm assuming this is a Kit bug

[sea-grass]

I don't think this is a kit problem. If canvas doesn't have a pre-built binary on your machine, it'll compile it from source on your machine. To do that, you need to first install development dependencies. The canvas readme includes a table with all necessary dependencies per OS.

If this is the case, since you're on mac, you either need to

brew install pkg-config cairo pango libpng jpeg giflib librsvg pixman

or

xcode-select --install

[benmccann]

Closing as it's unlikely this originates from SvelteKit. I'm hoping the comment above resolves your issue, but if it doesn't then please see https://github.com/sveltejs/kit#bug-reporting for details on reporting to Vite

[danawoodman]

@sea-grass @benmccann As I mentioned above, I can install and use it no problem with a plain Vite app (npm create vite with "vanilla" option), so I think this warrants reopening and reconsidering

[gtm-nayan]

@danawoodman Your issue is reproducible in a vite template that uses ssr (npm create vite-extra@latest -- --template ssr-vanilla), so likely not much SvelteKit can do here. Please report it to vite or jsdom as appropriate.

[danawoodman]

Ah, good to know. I'll submit an issue to Vite, thanks 🙏

[dummdidumm]

FYI someone having the same issue as you #7045 already did vitejs/vite#10255