'TypeError: Image or Canvas expected' when importing node-canvas in different modules

[automata]

As previously reported at #338 (comment), when someone tries to use canvas on two different modules, it breaks.

For example, if in one module we have:

var Canvas = require('canvas')
  , Image = Canvas.Image
  , other = require('other')
  , temporary = require('temporary')
  , request = require('request')
  , fs = require('fs'),
  , url = 'http://foo.com/bar.jpg',
  , tmpFile = new temporary.File(),
  , stream = fs.createWriteStream(tmpFile.path),
  , req = request({url: url, timeout: 10000});

req.pipe(stream);

req.on('response', function (resp) {
  if (resp.statusCode === 200) {
    return;
  }
});

req.on('end', function () {
  loadFile(tmpFile.path);
});

var loadFile = function (path) {
  fs.readFile(path, function (err, image) {
    var img = new Image();
    img.onload = function () {
      other.draw(img);
    }
    img.src = image;
  });
};

And in the other:

var Canvas = require('canvas')
  , Image = Canvas.Image
  , fs = require('fs');

var draw = function (img) {
      var w = img.width;
      var h = img.height;
      var canvas = new Canvas(w, h);
      var ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);

      var out = fs.createWriteStream(__dirname + '/foo.jpg');
      var stream = canvas.createJPEGStream({
        bufsize: 2048,
        quality: 80
      });
      stream.pipe(out);
};

That breaks because we are trying to draw an Image created using a different required canvas than that one we are using to draw the image. The following error is reported:

/home/foo/other/other.js:100
        ctx.drawImage(img, 0, 0, w, h, 0, 0, w, h);
              ^
TypeError: Image or Canvas expected

A possible fix is to both modules require the same node-canvas. However, this is just a temporary fix.

[xetrics]

This is killing me

[hiyangguo]

Hi, Can you tell me how to fixed this bug? thx

[zbjornson]

I can't find the other issue that discusses this more, but there is no way to fix this in node-canvas itself because it's a limitation of native addons (two different builds of node-canvas don't produce compatible objects). At some level, your JS code needs to make sure that it's using the same node-canvas everywhere. Without knowing anything about your application, this may mean using npm v3 or later, which has a flat(ter) node_modules directory; ensuring that everything that depends on node-canvas is allowed to use the same version; and/or providing a central wrapper for node-canvas that you require instead of requiring node-canvas directly. The first two should hopefully Just Work and not require code changes, but may be brittle.

[hiyangguo]

Tanks for your anwser.

[squalvj]

yeah, experienced this gotta make the canvas package same across all modules that using createCanvas

[piranna]

Maybe should the dependencies use node-canvas as a peerDependency instead of a direct one, so this way it's a dependency of the main project and so there's a single version?