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.

Jsdom with canvas does not support yarn pnp

See original GitHub issue

Basic info:

Node.js version: 10.15.3
jsdom version: 15.1.1
canvas version 2.5.0
yarn pnp enabled

Minimal reproduction case

Install the project with yarn pnp enabled

const { JSDOM } = require("jsdom");

const options = {
  pretendToBeVisual: true,
  storageQuota: 1e9,
  resources: "usable",
  runScripts: "dangerously"
};
const window = new JSDOM(`
   <!DOCTYPE html><body id="main"><p >Hello world</p></body>
`, options).window;
const document = window.document;
const navigator = window.navigator;


const main = async () => {
  console.log("before loading image");
  const imageLoaded = await new Promise((resolve, reject) => {
    console.log("beginning code promise");
    var image = document.createElementNS("http://www.w3.org/1999/xhtml", "img");
    function onImageLoad() {
      image.removeEventListener("load", onImageLoad, false);
      image.removeEventListener("error", onImageError, false);
      console.log("IMAGE LOADED");
      resolve(image);
    }

    function onImageError(event) {
      image.removeEventListener("load", onImageLoad, false);
      image.removeEventListener("error", onImageError, false);
      console.log("IMAGE LOADING FAILED");
      reject(event);
    }
    image.addEventListener("load", onImageLoad, false);
    image.addEventListener("error", onImageError, false);
    image.src = "foo.png";
    console.log("end code promise");
  });
  console.log("image loaded", imageLoaded);
};

main()

The image fails to load without launching any of error or load events, as if canvas was not installed. Indeed, with the code in https://github.com/jsdom/jsdom/blob/master/lib/jsdom/utils.js#L166 we see that with pnp, jsdom will fail finding the package which will result in boolean canvasInstalled being false all the time.

How does similar code behave in browsers?

canvas should be detected.

(Link to a jsbin or similar suggested.)

Issue Analytics

State:
Created 4 years ago
Reactions:1
Comments:7 (5 by maintainers)

Top GitHub Comments

2reactions

domeniccommented, May 29, 2019

Whoops, I thought we listed it as an optional dependency, but we don’t; we should probably do that. Or, if we want to continue our current style of letting application authors install it only as needed, then indeed, an optional peer dependency makes sense.

0reactions

Zirrocommented, May 31, 2019

This should be resolved by #2605, which adds canvas as an optional peer dependency.