Skip to content

Is Webpack + JSDOM + Canvas 2.x a supported environment? #1314

Closed
@MeoMix

Description

@MeoMix

Hey there. I'm struggling to get node-canvas working well with Webpack and JSDOM in a testing environment.

My goal is to test some code which is dependent on the result of context.getImageData in a headless browser environment. I am trying to achieve this using a combination of Mocha + Webpack + JSDOM + node-canvas.

Currently running in a Windows 10 environment with the following:

  • "canvas": "^2.1.0",
  • "jsdom": "^13.0.0",
  • "webpack": "^4.23.1",
  • "mocha-webpack": "^2.0.0-beta.0",

I have read through the provided installation guide. Here are some other resources I've looked at which were illuminating, but ultimately not helpful:


My current understanding is:

  • JSDOM 13.0 adds support for Canvas 2.x and will attempt to require the canvas module if possible.
  • Canvas 2.x dropped the need for pre-built binaries (canvas-prebuilt) and should "just work" out of the box. Canvas is built to run in a node environment.
  • Webpack must be told that it is executing in a node environment and configuring externals to exclude canvas may or may not be helpful.

and where I'm at with my code is:

  • I am able to load JSDOM from within my Webpack/Mocha environment without issue.
  • If I attempt import Canvas from 'canvas' or const Canvas = require('canvas') I error out with the message: Error in ./node_modules/canvas/build/Release/canvas.node: Module parse failed: Unexpected character '�' (1:0)

I am wondering if this is a supported scenario and, if it is, what steps I should be taking? If not, is the only solution to either A) only use Mocha + JSDOM + Canvas without webpack or B) test in a real browser environment using Karma?

Thanks for your time. Sorry, I know you get this question a lot in many different permutations, but I didn't see a canonical response and, given the recent update to 2.x, I thought things might have changed from what I read online.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions