[Bug]: Not working in Astro

[PuruVJ]

What happened?

First of all, freaking AWESOME library man!!! 🔥🔥🔥

I tried to use @tldraw/editor in Astro based environment, but I keep getting bundler errors. Now, I think it's not Astro itself, but some vite config at some level.

I keep getting the error:

[vite] Error when evaluating SSR module /src/Editor.jsx: failed to import "@tldraw/editor"|- file:///home/projects/github-6vmn42/node_modules/@tldraw/editor/dist/esm/lib/app/App.mjs:35import { EventEmitter } from "eventemitter3";         ^^^^^^^^^^^^SyntaxError: The requested module 'eventemitter3' does not provide an export named 'EventEmitter'

How can we reproduce the bug?

https://stackblitz.com/edit/github-6vmn42?file=src/Editor.jsx,src/pages/index.astro,package.json&on=stackblitz

What browsers are you seeing the problem on?

Chrome

Contact Details

twitter @puruvjdev

Code of Conduct

• I agree to follow this project's Code of Conduct

[steveruizok]

Thanks so much for the reproduction! I think this is something to do with the default export in the eventemitter3 library, see bug reported here. There doesn't seem to be a clear resolution for that, so I'll just switch to a named export and that should solve the issue.

[PuruVJ]

Thanks a lot!!! Any ETA on release? Wanna test out tldraw as soon as possible 😁

[Mjtlittle]

I dont think this resolved the issue; the error message im getting now is...

21:49:21 [ERROR] Named export 'EventEmitter' not found. The requested module 'eventemitter3' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'eventemitter3';
const { EventEmitter } = pkg;

It looks like you have to consume the package this way, or you can bump the version of the eventemitter3 package to the latest version. We are on v4, and v5 adds support for esm (https://github.com/primus/eventemitter3/releases/tag/5.0.0).

After fixing this inplace within node_modules, I run into the same issue with the package "lz-string". Upon fixing this packages usage also, I finally started loading assets for the editor, but now its stuck "Loading assets...".

I may be able to take a closer look later and maybe open a pr

[jezzzm]

Also seeing this error in context of Remix as a Vite plugin. Can't circumvent (e.g. noExternal config or cjsInterop plugin) without something like patch-package at the moment.

[phgn0]

So the following patches fix the tldraw build in a Remix app for me:

@tldraw+editor+2.0.2.patch

diff --git a/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs b/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs
index 0016452..9c010f3 100644
--- a/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs
+++ b/node_modules/@tldraw/editor/dist-esm/lib/editor/Editor.mjs
@@ -42,7 +42,7 @@ import {
   sortByIndex,
   structuredClone
 } from "@tldraw/utils";
-import { EventEmitter } from "eventemitter3";
+import EventEmitter from "eventemitter3";
 import { createTLUser } from "../config/createTLUser.mjs";
 import { checkShapesAndAddCore } from "../config/defaultShapes.mjs";
 import {

tldraw+2.0.2.patch

diff --git a/node_modules/tldraw/dist-esm/lib/ui/hooks/useClipboardEvents.mjs b/node_modules/tldraw/dist-esm/lib/ui/hooks/useClipboardEvents.mjs
index cc58edc..2ec1a51 100644
--- a/node_modules/tldraw/dist-esm/lib/ui/hooks/useClipboardEvents.mjs
+++ b/node_modules/tldraw/dist-esm/lib/ui/hooks/useClipboardEvents.mjs
@@ -4,7 +4,7 @@ import {
   useEditor,
   useValue
 } from "@tldraw/editor";
-import { compressToBase64, decompressFromBase64 } from "lz-string";
+import lz from "lz-string";
 import { useCallback, useEffect } from "react";
 import { useUiEvents } from "../context/events.mjs";
 import { pasteExcalidrawContent } from "./clipboard/pasteExcalidrawContent.mjs";
@@ -184,7 +184,7 @@ async function handleClipboardThings(editor, things, point) {
           const tldrawHtmlComment = text.match(/<tldraw[^>]*>(.*)<\/tldraw>/)?.[1];
           if (tldrawHtmlComment) {
             try {
-              const jsonComment = decompressFromBase64(tldrawHtmlComment);
+              const jsonComment = lz.decompressFromBase64(tldrawHtmlComment);
               if (jsonComment === null) {
                 r({
                   type: "error",
@@ -297,7 +297,7 @@ const handleNativeOrMenuCopy = (editor) => {
     }
     return;
   }
-  const stringifiedClipboard = compressToBase64(
+  const stringifiedClipboard = lz.compressToBase64(
     JSON.stringify({
       type: "application/tldraw",
       kind: "content",