Null pointer when used as bundle or compiled

[phil294]

Hello,

thanks for this tool, it works great! But not when bundled:

import { createCanvas, loadImage } from "https://raw.githubusercontent.com/DjDeveloperr/deno-canvas/master/mod.ts"

let canvas = createCanvas(200, 200)
let ctx = canvas.getContext("2d")
let img = await loadImage('img.jpg')
ctx.drawImage(img, 0, 0)

It works fine as deno run script.js. But when I deno bundle script.js bundle.js and deno run bundle.js or deno compile script.js (which presumably internally also calls deno bundle) and ./script, I get

error: Uncaught TypeError: Cannot read properties of undefined (reading 'MakeCanvas')
    return canvas.MakeCanvas(width, height);
                  ^
    at createCanvas (file:///b/some%20test/bundle.js:6752:19)
    at file:///b/some%20test/bundle.js:6754:15

Any idea why that could be? And how to solve it? Is it a Deno bug and should be reported there?

Thanks!

[DjDeveloperr]

Looks like a bug in deno bundler (which uses SWC). I'll look into this after my last exam which is tomorrow

[jtoppine]

Yes, it's most likely related to denoland/deno#12086

As a workaround, I found this works for me. Create your own JS module where you re-export canvas functions like below, and use those exports. To be honest I arrived at this solution by trial and error, and have very little idea or recollection how and why it works :) The loadImage function is basically copypasted here from deno-canvas source, because the bundler is not able to compile the original correctly.

import * as canvasInternal from 'https://deno.land/x/canvas/src/canvas.ts';

export const canvas = await canvasInternal.init();
export const canvasImpl = canvasInternal;
export const createCanvas = canvasInternal.createCanvas;

export const loadImage = async function(url) {
    let data;
    if (url instanceof Uint8Array) {
      data = url;
    } else if (url.startsWith("http")) {
      data = await fetch(url).then((e) => e.arrayBuffer()).then((e) =>
        new Uint8Array(e)
      );
    } else {
      data = await Deno.readFile(url);
    }
    const img = canvas.MakeImageFromEncoded(data);
    if (!img) throw new Error("Invalid image data");
    return img;
}

[lino-levan]

This issue should be closed as this was an issue with deno (and deno has patched this issue in newer versions).

I should note that unfortunately the bug being fixed by this pull request is currently affecting a lot of deno compile runs right now, so even though the original issue is fixed, deno compile might not work until this is merged and released.