dynamic import of `canvas` causes bundling problems

Unfortunately, the dynamic import of canvas trips up some bundlers that are trying to include all requirements. Perhaps the dynamic import can be further obfuscated, so it’s not discoverable via static analysis?

All relevant code is here:

https://github.com/jsdom/jsdom/blob/16d3913eea0360c7757e75f7e266c3873c85b7dd/lib/jsdom/utils.js#L163-L177

The problem it’s causing has an issue here:

https://github.com/zeit/ncc/issues/274

[domenic]

Sorry, but we target Node.js, not bundlers. If bundlers are unable to handle this but still claim to support Node.js code, then they have a bug, or need more configuration.

Closing as working-as-intended, but feel free to discuss in the closed thread with others who might have an idea on how to configure your bundler.

[akirk]

If you don’t want to use canvas and need avoid the error message Module not found: Error: Can't resolve 'canvas' when bundling with Webpack (for example because of a CI), it worked for me to remap canvas to the util package like this in webpack.config.js:

externals: {
	canvas: "util"
}

Since jsdom checks the Canvas object for typeof Canvas.createCanvas === "function" it will fail and thus not enable canvas support.

Webpack rewrites the require("canvas") to require("util") (actually something like __webpack_require__(/*! canvas */ \"util\");) which succeeds which in turn prevents the error message. Since the util function is part of node, it doesn’t add to the weight of the bundle.