question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Is it possible to use jsdom without canvas support?

See original GitHub issue

I don’t need canvas support and I’ve been getting this error when importing jsdom into my project:

19 01 2017 13:07:19.722:ERROR [karma]: Error: Cannot find module ‘canvas’ from ‘.’

I’m not using the <canvas> element on my code so I don’t understand why I get that error. This should only happen if the canvas package is actually used for anything. But since I don’t have <canvas> elements, why is it being used?

I could install the canvas package but I’m on Windows and that has a lot of dependencies just to install a simple package. I really didn’t want to have all that work for a package I don’t need.

Can I workaround this without having to install the canvas package?

EDIT:

Looking at the README:

jsdom includes support for using the canvas package to extend any <canvas> elements with the canvas API. To make this work, you need to include canvas as a dependency in your project, as a peer of jsdom. If jsdom can find the canvas package, it will use it, but if it’s not present, then <canvas> elements will behave like <div>s.

Why is my test suite crashing when I import jsdom into my spec files without having the canvas package installed?

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:21 (4 by maintainers)

github_iconTop GitHub Comments

9reactions
hubgitcommented, Feb 12, 2019

I was able to work around this by adding "canvas": "file:./canvas" to the dependencies section of the app’s package.json and creating canvas/index.js containing simply module.exports = {}.

That was enough to persuade jsdom that canvas wasn’t available, after building the app with @zeit/ncc (webpack).

6reactions
intricatecloudcommented, Jun 4, 2020

Landing here from a google search for this specific scenario - i’m also using webpack with lambda.

The trick is to tell webpack to provide an empty stub of canvas:

    externals: {
        ...
        canvas: '{}',
    },

Note the quotes around the braces. This creates an empty object. If you use {}, you wind up getting an error “Cannot read property ‘createCanvas’ of undefined”.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Integrating canvas into jsdom - Stack Overflow
jsdom includes support for using the canvas or canvas-prebuilt package to extend any elements with the canvas API. To make this work, you...
Read more >
Is it possible to use jsdom without canvas support?
Is it possible to use jsdom without canvas support ?
Read more >
jsdom - npm
jsdom. jsdom is a pure-JavaScript implementation of many web standards, notably the WHATWG DOM and HTML Standards, for use with Node.js.
Read more >
How do you use the jsdom canvas support? - Google Groups
Hi folks,. I'm relatively new to Javascript, and I'm trying to use jsdom, node.js, and canvas together on a Linux server.
Read more >
How to test HTML5 canvas with jest? - Yonatan Kra
Since my son and I are both keen on testing, we struggled with testing canvas operations using Jest. Jest is using JSDom, which...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found