TypeError: ReactSharedInternals is undefined

[SOG-web]

Astro Info

Astro                    v5.1.2
Node                     v22.11.0
System                   macOS (x64)
Package Manager          pnpm
Output                   static
Adapter                  @astrojs/node
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @analogjs/astro-angular

If this issue only occurs in one browser, which browser is a problem?

Firefox

Describe the Bug

Am trying to to use Excalidraw in my astro app

<div  style={{ height: "500px" }}>
        <Excalidraw client:only="react" />
    </div>

[astro-island] Error hydrating /node_modules/.vite/deps/@excalidraw_excalidraw.js?v=61f308ba TypeError: error loading dynamically imported module: http://localhost:4321/node_modules/.vite/deps/@excalidraw_excalidraw.js?v=61f308ba

[astro-island] Error hydrating /node_modules/.vite/deps/@excalidraw_excalidraw.js?v=14bf18ac TypeError: ReactSharedInternals is undefined

What's the expected result?

to load Excalidraw

Link to Minimal Reproducible Example

https://github.com/SOG-web/astro-test.git

Participation

• I am willing to submit a pull request for this issue.

[SOG-web]

after more debuging am left with this error

[astro-island] Error hydrating /node_modules/.vite/deps/@excalidraw_excalidraw.js?v=0801ef05 TypeError: ReactSharedInternals is undefined

[ematipico]

I can't access the repro

[github-actions]

Hello @SOG-web. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

[SOG-web]

I can't access the repro

now public, thanks

[darpserj]

Hey there! I've played around with trying to add Excalidraw to Astro and here's what I found:

1. Excalidraw supports react@17 so make sure you're using it
2. Use the Excalidraw Wrapper component provided in their docs along with client:only="react"

Also, check out the Stackblitz sample for more info.

Hope it helped 😄

Edit: added @SOG-web

[ascorbic]

Thanks for the pointer @darpserj. I do have a workaround, but it doesn't need all of the things you've suggested (most of which are Next.js-specific). The things you do need are:

• a wrapper component
• define IS_PREACT (yes really, even with React)

The working example is here: https://stackblitz.com/edit/github-ukl5k9ba?file=astro.config.mjs

The fact the Preact thing is needed is clearly a bug in Excalidraw, so I'd suggest reporting it to them. In the meantime, you can use that demo and a starting point.

[SOG-web]

Thanks for the pointer @darpserj. I do have a workaround, but it doesn't need all of the things you've suggested (most of which are Next.js-specific). The things you do need are:

* a wrapper component

* define IS_PREACT (yes really, even with React)

The working example is here: https://stackblitz.com/edit/github-ukl5k9ba?file=astro.config.mjs

The fact the Preact thing is needed is clearly a bug in Excalidraw, so I'd suggest reporting it to them. In the meantime, you can use that demo and a starting point.

thanks so much