Skip to content

Dev: @astrojs/cloudflare + Actions + React island causes react-dom/client SyntaxError on hydration #16387

Description

@aka9232

Astro Info

Astro                    v6.1.8
Vite                     v7.3.2
Node                     v22.22.1
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  @astrojs/cloudflare (v13.1.10)
Integrations             @astrojs/react (v5.0.3)

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

No response

Describe the Bug

On the dev server, the combination of @astrojs/cloudflare adapter + @astrojs/react + Astro Actions + a React island corrupts the Vite client environment's dep optimizer.

node_modules/.vite/deps/_metadata.json ends up containing only astro/actions/runtime/entrypoints/route.js. As a result, @astrojs/react/dist/client.js imports react-dom/client directly from raw pnpm CJS, which throws SyntaxError: does not provide an export named 'createRoot' in the browser at hydrate time.

The bug reproduces only when all four of the following are present — removing any one of them makes the bug disappear:

  1. adapter: cloudflare(...) active in dev
  2. integrations: [react()]
  3. src/actions/index.ts exports at least one defineAction
  4. At least one React island with client:*

A detailed investigation (including the Vite-side trace that pinpoints the trigger in astro:integration-container's buildStart hook, a possible fix direction, and a user-side interim workaround) is written up in the reproducer README: https://github.com/aka9232/astro6-cf-react-dev-repro#root-cause

Related: vitejs/vite#19323 covers similar territory but is scoped to SSR environments; the client-env variant here is not covered.

What's the expected result?

The React island should hydrate without error. react-dom/client should be served from node_modules/.vite/deps/ (pre-bundled as an ESM wrapper), the same way it is when any of the four conditions above is absent.

Link to Minimal Reproducible Example

https://github.com/aka9232/astro6-cf-react-dev-repro

Participation

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    triage: unable to reproduceTriage bot attempted reproduction but could not reproduce

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions