canvas error when running happo-ci

[hellothereamy]

When I run the happo-ci command, I get this error:

happo.io@^3.17.0:
/home/circleci/project/node_modules/canvas/lib/context2d.js:13
bindings.CanvasRenderingContext2dInit(DOMMatrix, parseFont)
         ^

TypeError: bindings.CanvasRenderingContext2dInit is not a function
    at Object.<anonymous> (/home/circleci/project/node_modules/canvas/lib/context2d.js:13:10)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:787:10)
    at Module.load (internal/modules/cjs/loader.js:653:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
    at Function.Module._load (internal/modules/cjs/loader.js:585:3)
    at Module.require (internal/modules/cjs/loader.js:690:17)
    at require (internal/modules/cjs/helpers.js:25:18)
    at Object.<anonymous> (/home/circleci/project/node_modules/canvas/lib/canvas.js:11:19)
    at Module._compile (internal/modules/cjs/loader.js:776:30)
error Command failed with exit code 1.

here are my package versions:
node 10.15.3
"canvas": "^2.5.0"
"happo.io": "^3.17.0",

[trotzig]

Interesting, I haven't seen this before. Is there a longer console log you could share? If you're not comfortable sharing the entire CircleCI job log here you can send it in an email to support@happo.io. I'm mainly thinking there could be something interesting in the yarn install/npm install section about failing to get (or build) native bindings for the canvas library (similar to what this issue is describing, or what this rage tweet is hinting at 🙂).

I made an attempt at reproducing the error in one of my own projects (which uses CircleCI), but it didn't throw the same error. Here's the commit/diff I applied:

commit 64f282c42862830303b0e0a0f6d73f557bec8772
Author: Henric Trotzig <henric.trotzig@gmail.com>
Date:   Wed Jun 5 09:36:58 2019 +0200

    WIP: add canvas

diff --git a/package.json b/package.json
index 7c80759..ea336f3 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "@zeit/next-workers": "^1.0.0",
     "aws-sdk": "^2.399.0",
     "body-parser": "^1.18.1",
+    "canvas": "^2.5.0",
     "cookie-session": "^1.3.1",
     "crypto-random-string": "^1.0.0",
     "cssesc": "0.1.0",
diff --git a/src/Button-happo.js b/src/Button-happo.js
index 64c0279..c1444a6 100644
--- a/src/Button-happo.js
+++ b/src/Button-happo.js
@@ -2,6 +2,11 @@ import React from 'react';
 
 import Button from './Button';
 
+import { createCanvas } from 'canvas';
+
+const mycanvas = createCanvas(200, 200)
+const myPDFcanvas = createCanvas(600, 800, 'pdf')
+
 export const large = () => <Button large>Sign up!</Button>;
 export const small = () => <Button small>Remove</Button>;
 export const medium = () => <Button medium>Add email</Button>;

It looks like your project is using the happo-plugin-storybook plugin, is that correct? I'm assuming there's one or a few stories relying on the canvas module. A temporary workaround would be to exclude those stories from the happo run, using { happo: false }:

storiesOf('FooComponent', module)
  .add('Default', () => <FooComponent />);
  .add('Dynamic', () => <DynamicFooComponent />, { happo: false });

You can also exclude a whole block using the isHappoRun function:

import { isHappoRun } from 'happo-plugin-storybook/register';

if (!isHappoRun()) {
  storiesOf('FooComponent', module)
    .add('Default', () => <FooComponent />);
    .add('Dynamic', () => <DynamicFooComponent />);
}

Sorry you're running into these issues -- hopefully we can get things resolved for you asap!

[hellothereamy]

Hi Henric,

thanks so much for your help! We ended up not even needing canvas so we just took it out...
and ta da! it works!

[trotzig]

Yay! Glad you got it working! 🎉