Trouble loading ESM from Deno

[duncanmak]

My code looks like this:

import { assertEquals } from "@std/testing/asserts.ts";
import { SVG, registerWindow } from "https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.esm.js";
import { createSVGWindow } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";

Deno.test("svg", () => {
  const window = createSVGWindow();
  const document = window.document;

  // register window and document
  registerWindow(window, document);

  // create canvas
  const canvas = SVG(document.documentElement);
  canvas.rect(100, 100);

  console.log('hello', canvas.svg());
  assertEquals(canvas.svg(), "");
});

I get this error:

./tests/canvas.test.ts (uncaught error)
error: SyntaxError: The requested module '/npm/[email protected]/+esm' does not provide an export named 'default'
    at <anonymous> (https://cdn.jsdelivr.net/npm/[email protected]/+esm:7:92)
This error was not caught from a test and caused the test runner to fail on the referenced module.
It most likely originated from a dangling promise, event/timeout handler or top-level code.

Is there a problem with the ESM file?

[Fuzzyma]

The problem seems to be the import of fontkit - that's a dependency of svgdom.

Maybe the import has to be changed 🤔. Not sure tho. Usually people just use the package by installing into hide modules

[duncanmak]

Deno also has npm support, so I tried it:
Some types don't import the same (probably another bug)

import { SVG, registerWindow, Rect } from "npm:@svgdotjs/[email protected]";
import svgdom from "npm:[email protected]";

Deno.test("svg", () => {
  const window = svgdom.createSVGWindow();
  const document = window.document;

  // register window and document
  registerWindow(window, document);

  // create canvas
  const canvas = SVG(document.documentElement);
  // canvas.rect(100, 100);
  new Rect().size(100, 100).addTo(canvas);

  console.log('hello', canvas.svg());
  assertEquals(canvas.svg(), "");
});

It seems a little better, but I think the same problem is still there:

❯ deno test .\tests\canvas.test.ts

ok | 0 passed | 0 failed (875ms)

error: Could not find npm package 'iconv-lite' referenced by '[email protected]'.

[duncanmak]

Maybe using fontkit 2.0.0 will make this work better?

https://github.com/foliojs/fontkit/releases/tag/v2.0.0

[duncanmak]

I just made this PR: #107

I wonder if that's the trick to solve the issue I mentioned here.

[duncanmak]

Looks like this is also necessary for svgdom to work in Deno:

image-size/image-size#370

[runelk]

Adding an explicit import of iconv-lite seems to be a workaround for now (modified version of @duncanmak 's example):

import "npm:[email protected]";
import { SVG, registerWindow, Rect } from "npm:@svgdotjs/[email protected]";
import * as svgdom from "npm:[email protected]";
import { assertEquals } from "https://deno.land/[email protected]/assert/mod.ts";

Deno.test("svg", () => {
  const window = svgdom.createSVGWindow();
  const document = window.document;
  registerWindow(window, document);
  const canvas = SVG(document.documentElement);
  new Rect().size(100, 100).addTo(canvas);
  assertEquals(
    canvas.svg(),
    '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs"><rect width="100" height="100"></rect></svg>'
  );
});