Description
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:
- Error: Cannot resolve native modules such as 'canvas' using latest webpack fabricjs/fabric.js#3115
- webpack issue with canvas #942
- https://github.com/zinserjan/mocha-webpack/blob/master/docs/guides/jsdom.md
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 excludecanvas
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'
orconst 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.