Excalidraw TypeError: Failed to construct 'URL': Invalid URL

Expected Outcome:

Following Excalidraw docs provided code working without error for Next js

Excalidraw Node mounted in the html tree

Issue: Unhandled Runtime Error

I read thru Excalidraw examples for Next js in Excalidraw's docs & I cannot find a solution to invalid URL for weeks

I read thru different example from:

• Lexical
• Excalidraw example

Still have the same issue of ERROR: Invalid URL + 'ReactCurrentDispatcher'

My attampts

1. I dowgraded excalidraw to 0.17.0 still not works
2. I deleted node_modules & re-install still no avail
3. I Try different version of next js , still not work (maybe I did't change the react version idk..)
4. I haven't try Yarn package manager , could be npm package manager issue

I am not smart enough .. some help will be nice😊!

How to recreate the error?

1. Install next js
   npx create-next-app@latest
2. I use app router
   Would you like to use App Router? (recommended) "Yes" <- Yes/Y
3. Install Excalidraw
   npm install react react-dom @excalidraw/excalidraw or Just copy my packages.json
4. Install packages
   npm i
5. Copy my component or go the Exalidraw docs & follow it here
6. The error should occur

My package.json:

{
  "name": "learn-excalidraw",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "NODE_OPTIONS='--inspect' next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@excalidraw/excalidraw": "^0.17.0",
    "@lexical/react": "^0.20.0",
    "@radix-ui/react-dialog": "^1.1.2",
    "@radix-ui/react-slot": "^1.1.0",
    "class-variance-authority": "^0.7.0",
    "clsx": "^2.1.1",
    "lexical": "^0.20.0",
    "lucide-react": "^0.461.0",
    "next": "15.0.3",
    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0",
    "tailwind-merge": "^2.5.5",
    "tailwindcss-animate": "^1.0.7"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "15.0.3",
    "postcss": "^8",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  },
  "peerDependencies": {
    "react": "^16.8 || ^17.0 || ^18.0 || ^19.0",
    "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0"
  }
}

My Components:

ExcalidrawWrapper.tsx

My excalidraw wrapper according to the docs here

"use client";

import { Excalidraw } from "@excalidraw/excalidraw";

const ExcalidrawWrapper: React.FC = () => {
  return (
    <div style={{ height: "500px", width: "500px" }}>
      <Excalidraw />
    </div>
  );
};

export default ExcalidrawWrapper;

My page.tsx

"use client";

import { Suspense } from "react";
import dynamic from "next/dynamic";
import Script from "next/script";

// Dynamically import ExcalidrawWrapper with SSR disabled
const ExcalidrawWrapperClient = dynamic(
  async () => (await import("../components/Excalidraw/ExcalidrawWrapper")).default,
  { ssr: false }
);

export default function Page() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <Script id="load-env-variables" strategy="beforeInteractive">
        {`
          window["EXCALIDRAW_ASSET_PATH"] = window.origin;
          console.log(window["EXCALIDRAW_ASSET_PATH"]);
        `}
      </Script>
      <ExcalidrawWrapperClient />
    </Suspense>
  );
}

The console.log(window["EXCALIDRAW_ASSET_PATH"]) is use to test if the url path is correct , for my case ts correctly connect to 127.0.0.1:3000

I added the <Script /> to test out a solution for TypeError: ReactCurrentDispatcher

TypeError: Cannot read properties of undefined (reading 'ReactCurrentDispatcher')

This solution come from here