From 185d603a94d6a2f4e67de78b1f8f4eca6b726ec2 Mon Sep 17 00:00:00 2001
From: bruno <bruno.charest@gmail.com>
Date: Wed, 29 Jul 2026 20:50:36 -0400
Subject: [PATCH] =?UTF-8?q?fix:=20Excalidraw=20loading=20forever=20?=
 =?UTF-8?q?=E2=80=94=20ReactDOM.createRoot=20undefined?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Root cause: 'import ReactDOM from react-dom' resolves to the root
react-dom package which does NOT export createRoot in React 18.
createRoot lives in react-dom/client.

Changes:
- Changed import to 'react-dom/client' (line 109)
- Added error handling around the render call so loading spinner
  shows an error message instead of spinning forever on failures
---
 frontend/excalidraw-editor.html | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/frontend/excalidraw-editor.html b/frontend/excalidraw-editor.html
index 6cea14e..57eeaef 100644
--- a/frontend/excalidraw-editor.html
+++ b/frontend/excalidraw-editor.html
@@ -106,7 +106,7 @@
   <!-- Single module script -->
   <script type="module">
     import React from "react";
-    import ReactDOM from "react-dom";
+    import ReactDOM from "react-dom/client";
     import { decompressFromBase64 } from "https://esm.sh/lz-string@1.5.0";
     import * as ExcalidrawLib from "https://esm.sh/@excalidraw/excalidraw@0.18.0?alias=react:react@18.3.1,react-dom:react-dom@18.3.1";
 
@@ -246,12 +246,22 @@
             currentTheme = msg.theme || "light";
             setTheme(currentTheme);
 
-            ReactDOM.createRoot(document.getElementById("root")).render(
-              React.createElement(App, {
-                initialData: initialData,
-                theme: currentTheme,
-              })
-            );
+            try {
+              if (typeof ReactDOM.createRoot !== "function") {
+                throw new Error("ReactDOM.createRoot is not available — check react-dom/client import");
+              }
+              ReactDOM.createRoot(document.getElementById("root")).render(
+                React.createElement(App, {
+                  initialData: initialData,
+                  theme: currentTheme,
+                })
+              );
+            } catch (renderErr) {
+              console.error("Excalidraw render failed:", renderErr);
+              loadingEl.textContent = "Error loading Excalidraw: " + renderErr.message;
+              loadingEl.style.color = "#f44336";
+              loadingEl.classList.remove("hidden");
+            }
           }
           break;