fix(excalidraw): use import map to force React 18.3.1 for ALL modules including Excalidraw internals

2026-07-29 11:41:30 -04:00
parent 7d8fa18201
commit 8c665fb568
6 changed files with 104 additions and 13 deletions
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
+<meta http-equiv="Pragma" content="no-cache">
+<meta http-equiv="Expires" content="0">
+<title>Excalidraw Final Test</title>
+<style>
+  body { font-family:monospace; background:#1e1e1e; color:#ddd; padding:20px; }
+  .pass { color:#4caf50; } .fail { color:#f44336; }
+  pre { background:#2d2d2d; padding:10px; border-radius:4px; }
+  #app { margin-top:20px; border:1px dashed #555; min-height:100px; padding:10px; }
+</style>
+</head>
+<body>
+<h2>Excalidraw Final Test (Import Map)</h2>
+<pre id="log"></pre>
+<div id="app"></div>
+
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/[email protected]",
+    "react-dom": "https://esm.sh/[email protected]",
+    "react-dom/": "https://esm.sh/[email protected]/"
+  }
+}
+</script>
+
+<script type="module">
+import React from "react";
+import ReactDOM from "react-dom/client";
+const log = document.getElementById('log');
+function add(msg, cls='') { log.innerHTML += `<span class="${cls}">${msg}</span>\n`; }
+
+add('React version: ' + React.version, 'info');
+
+class ErrorBoundary extends React.Component {
+  constructor(props) { super(props); this.state = { error: null }; }
+  static getDerivedStateFromError(error) { return { error }; }
+  componentDidCatch(error, info) {
+    add(`✗ ERROR: ${error.message}`, 'fail');
+    add(`  ${(error.stack||'').split('\n').slice(0,3).join('\n')}`, 'info');
+  }
+  render() {
+    if (this.state.error) return React.createElement('div', {style:{color:'red',padding:'20px'}}, 'Error: '+this.state.error.message);
+    return this.props.children;
+  }
+}
+
+try {
+  window.EXCALIDRAW_ASSET_PATH = 'https://esm.sh/@excalidraw/[email protected]/dist/prod/';
+  const ExcalidrawLib = await import('@excalidraw/[email protected]');
+  const { Excalidraw } = ExcalidrawLib;
+  add('Excalidraw loaded', 'pass');
+
+  const root = ReactDOM.createRoot(document.getElementById('app'));
+  root.render(
+    React.createElement(ErrorBoundary, null,
+      React.createElement(Excalidraw, {
+        theme: 'dark',
+        excalidrawRef: (api) => add('✓ EXCALIDRAW MOUNTED!', 'pass'),
+        onChange: () => {},
+      })
+    )
+  );
+  add('render() called - waiting for mount...', 'info');
+} catch(e) {
+  add(`✗ ${e.message}`, 'fail');
+}
+</script>
+</body>
+</html>