Repository: excalidraw
Issue: TypeError: Failed to construct 'URL': Invalid URL
Labels: bug,font

# 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

![Image](https://github.com/user-attachments/assets/0c815ebb-31ac-43fa-a39c-66668f76ed5a)


## Issue: Unhandled Runtime Error

I read thru [Excalidraw examples for Next js in Excalidraw's docs ](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration#nextjs) & I cannot find a solution to **invalid URL**  for weeks

![Image](https://github.com/user-attachments/assets/0daff256-5db6-44c4-bb7f-c93a714662ce)

I read thru different example from:

- [Lexical](https://github.com/facebook/lexical/blob/main/packages/lexical-playground/src/nodes/ExcalidrawNode/ExcalidrawImage.tsx)
- [Excalidraw example](https://github.com/excalidraw/excalidraw/blob/master/examples/excalidraw/with-nextjs/src/excalidrawWrapper.tsx)

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](https://nextjs.org/docs/app/getting-started/installation) <br> `npx create-next-app@latest`
2. I use app router  <br> `Would you like to use App Router? (recommended) "Yes"` <- Yes/Y
3. [Install Excalidraw](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/installation) <br> `npm install react react-dom @excalidraw/excalidraw` or Just copy my `packages.json`
4. Install packages <br> `npm i` 
5. Copy my component or go the Exalidraw docs & follow it [here](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration#nextjs)
6. The error should occur ![Image](https://github.com/user-attachments/assets/d8b53fbf-142b-4f53-b01b-d9c4ac3b5e8f)


### My package.json:

```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](https://docs.excalidraw.com/docs/@excalidraw/excalidraw/integration#nextjs)

```tsx
"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

```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')

![Image](https://github.com/user-attachments/assets/1046fe64-8f48-4fcf-8a4f-5239856eadf6)


This solution come from [here](https://github.com/excalidraw/excalidraw/blob/master/examples/excalidraw/with-nextjs/src/app/page.tsx)