ERROR: self is not defined

[bennidi]

I am getting this error when trying to run your example (using node v16.15.0) and "type"="module"

ReferenceError: self is not defined at Object.<anonymous> (/Users/bdiedrichsen/dev/sources/laboratory/deskone/node_modules/svg-to-excalidraw/dist/bundle.js:1:242) ....

Something is not right with the bundling. I found this link https://stackoverflow.com/questions/64639839/typescript-webpack-library-generates-referenceerror-self-is-not-defined and tried to replace self with this in the code. It went along and produced other errors about things not defined. I tried checking out the repo and changing the globalObject to this but I just get the next error ReferenceError: DOMParser is not defined.

I think your library is not built to be used in non-browser environments. Which is a pitty because I wanted to integrate it with Kit. It would be a great tool for creating library elements from desktop workflow.

Maybe you are interested in producing a version that can be run in node environment?

[jneless]

+1, a same error code in my desktop

[trqdz]

+1，Running in a node environment also throws the same error

[brochington]

I think your library is not built to be used in non-browser environments.

This is correct, as the library uses a number of DOM APIs (such as DOMParser). It may be possible to something JsDOM, or Cheerio, but this would need to be investigated.

[bennidi]

@brochington I looked into the API usage and I guess it is mostly about the traversal part of the DOM tree. None of the libs like JsDOM or Cheerio implement this. Only the DOM Parser does. It doesn't look trivial to replace this but I still think it would be worth it. Integration of excalidraw into desktop tools would be so nice...

[alexg-axis]

Snippet for running this using playwright. Works quite well. Assumes you've installed 'playwright' and 'svg-to-excalidraw' in the local directory.

// svg-to-excalidraw.js

const { readFileSync } = require("fs");
const { argv } = require("process");
const path = require("path");

const playwright = require("playwright");

const svgToExcalidraw = readFileSync(
  path.join(__dirname, "../node_modules/svg-to-excalidraw/dist/bundle.js")
).toString("utf-8");

const input = readFileSync(argv[2]);

(async () => {
  const browser = await playwright.chromium.launch();
  const page = await browser.newPage();

  page.on("console", async (message) => {
    const messageArgs = message.args();
    const logValues = await Promise.all(
      messageArgs.map(async (arg) => await arg.jsonValue())
    );
    console.log(...logValues);
  });

  // Export the library's convert function to the window object
  await page.evaluate(
    ([svgToExcalidraw]) => {
      const f = Function("module", "exports", svgToExcalidraw);
      const module = { exports: {} };
      f.call(module, module, module.exports);
      window.svgToExcalidraw = module.exports.default.convert;
    },
    [svgToExcalidraw]
  );

  // Convert an SVG
  const result = await page.evaluate(
    ([input]) => {
      return new Promise((resolve, reject) => {
        const { hasErrors, errors, content } = window.svgToExcalidraw(input);
        if (hasErrors) {
          reject(errors);
        } else {
          resolve(content);
        }
      });
    },
    [input.toString("utf-8")]
  );
  console.log(result);

  await browser.close();
})();

node svg-to-excalidraw.js ./path/to/file.svg

[TheKissOfDragon]

also encounter this issue, is there a workaround to avoid issue

[alexg-axis]

also encounter this issue, is there a workaround to avoid issue

See the snippet above. Currently you'll need a full DOM implementation, so using an actual browser engine is probably your best bet.