I'm building out a Angular Universal server. However, the app requires Phaser. It's wrapped in a isOnBrowser check, but the renderer is still building Phaser itself.
Because Phaser requires canvas, this is causing a whole host of errors - most of them bypassable. I've got node-canvas installed, but npm is now hanging on building this part of the server output:
/*!
* Canvas - Context2d
* Copyright (c) 2010 LearnBoost <tj@learnboost.com>
* MIT Licensed
*/
const bindings = __webpack_require__(256)
const parseFont = __webpack_require__(259)
const { DOMMatrix } = __webpack_require__(260)
bindings.CanvasRenderingContext2dInit(DOMMatrix, parseFont)
module.exports = bindings.CanvasRenderingContext2d
As far as I can tell, webpack_require_256 is pointing to node-canvas itself, so the build appears to possibly not be working.
The error it's reporting is
TypeError: bindings.CanvasRenderingContext2dInit is not a function
I've already tried to delete node_modules and done a reinstall with npm install, but nothing seems to be working. It's being instantiated by jsdom, with the following globals set up:
// Express server
const app = express();
const jsdom = require('jsdom');
const window = new jsdom('<!doctype html><html><body></body></html>');
const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist/browser');
global['window'] = window;
global['document'] = window.document;
global['performance'] = {};
global['navigator'] = { userAgent: 'Custom' };
The canvas and jsdom installs use these versions:
"canvas": "^2.3.1", "jsdom": "^16.2.1"
Is there anything else I can try?