Invalid hook call during dev SSR with @astrojs/cloudflare and a React island

[valkum]

Astro Info

Astro                    v7.2.1
Node                     v22.21.1
System                   macOS (arm64)
Package Manager          bun
Output                   static
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/react

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

No response

Describe the Bug

This is a follow-up to #16529, which was closed with "We believe this is likely fixed in Astro 7." The error is still present on Astro 7.2.1.

Repro:

1. bun install (or npm install)
2. rm -rf node_modules/.vite
3. bunx astro dev
4. Request the page one time: curl -s http://localhost:4321/ | wc -c
5. Request the page a second time.

The first response is 420 bytes and holds no astro-island element. The server logs:

[ERROR] [vite] Invalid hook call. Hooks can only be called inside of the body of a function component.
[ERROR] [vite] TypeError: Cannot read properties of null (reading 'useState')
    at Object.exports.useState (node_modules/react/cjs/react.development.js:1263:33)
    at ReproCounter (src/components/ReproCounter.tsx:4:29)
    at renderWithHooks (node_modules/.vite/deps_ssr/react-dom_server.js:2797:19)

This is caused by using React and the Cloudflare adapter. The docs do not mention any caveats when using both.

What's the expected result?

The first response renders the island.

Link to Minimal Reproducible Example

https://github.com/valkum/astro-7-react-cloudflare-issue

Participation

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

[astro-factory]

Triage complete

• Prepare the workspace: ready
• Install dependencies: complete
• Build the project: complete
• Reproduce the issue: not reproduced
• Diagnose the cause: not needed (the issue was not reproduced)
• Verify the diagnosis: not needed (the issue was not reproduced)
• Attempt a fix: not needed (the issue was not reproduced)
• Publish the result: set triage: unable to reproduce

---

• Reproduced: No — the bug does not reproduce on the current main branch (Astro v7.2.7)
• Exploration: Already fixed — View branch
• Unit Test: No — the existing packages/integrations/cloudflare/test/with-react.test.ts already covers Cloudflare + React and passes
• Priority: P3: minor bug. This affects a specific adapter + framework combo during dev, and appears to already be resolved on main. The reporter is on an older version (v7.2.1).

I was unable to reproduce this on the current main branch (Astro v7.2.7, latest @astrojs/cloudflare). With a clean Vite cache, both the first and second dev server requests correctly rendered the React island with useState and client:load — no hook errors, no missing <astro-island>. The existing with-react.test.ts test in the Cloudflare adapter also passes. There have been several SSR dependency optimization fixes between v7.2.1 and v7.2.7 (notably PR #16708, #16769, #16770, and others) that addressed dep-loading race conditions in the Cloudflare dev environment.

This issue has already been fixed. Upgrading to the latest Astro and @astrojs/cloudflare versions should resolve it. If the issue persists after upgrading, it may be bun-specific (the reporter uses bun; our triage used Node.js/pnpm), in which case a new issue with updated reproduction details would be helpful.

Full Triage Report

Issue Summary

Title: Invalid hook call during dev SSR with @astrojs/cloudflare and a React island

Reporter: @valkum

Description: When using @astrojs/cloudflare adapter with @astrojs/react integration and a React component that uses hooks (e.g., useState) as a client island (client:load), the first dev server request fails with:

[ERROR] [vite] Invalid hook call. Hooks can only be called inside of the body of a function component.
[ERROR] [vite] TypeError: Cannot read properties of null (reading 'useState')

The first response is only 420 bytes and contains no <astro-island> element. The reporter says this is a follow-up to #16529, which was closed with "We believe this is likely fixed in Astro 7."

Reproduction steps from issue:

1. Create an Astro project with @astrojs/cloudflare adapter and @astrojs/react integration
2. Add a React component using useState hook
3. Use the component with client:load directive
4. rm -rf node_modules/.vite
5. Start dev server
6. First request fails with hook error

Expected result: The first response renders the island correctly.

Minimal reproduction: https://github.com/valkum/astro-7-react-cloudflare-issue

Environment

Issue environment:

• Astro v7.2.1
• Node v22.21.1
• macOS (arm64)
• Package Manager: bun
• Adapter: @astrojs/cloudflare (^14.2.1)
• Integration: @astrojs/react (^6.0.2)

Triage environment:

• Astro v7.2.7 (from main branch)
• Node.js (pnpm workspace)
• @astrojs/cloudflare: workspace (latest)
• @astrojs/react: workspace (latest)

Reproduction Attempts

Setup

Created reproduction project with:

• @astrojs/cloudflare adapter
• @astrojs/react integration
• A ReproCounter.tsx component using useState hook
• An index.astro page using <ReproCounter client:load />

This matches the reporter's reproduction exactly.

Attempt 1: Dev Server (clean vite cache)

1. Cleared .vite cache and .astro directory
2. Started dev server with astro dev --background
3. Made first request with curl -s http://localhost:4321/
4. Result: Response was 5469 bytes, contained <astro-island> with <button>0</button> inside
5. Made second request
6. Result: Same — 5469 bytes with proper island rendering
7. Server logs showed no errors

Attempt 2: Dev Server (second clean start)

1. Stopped server, cleared cache again
2. Restarted dev server
3. First and second requests both returned proper 5469-byte responses with island
4. No errors in server logs

Attempt 3: Build

1. Ran astro build
2. Build succeeded without errors
3. Output contained proper <astro-island> with <button>0</button> content

Attempt 4: Existing with-react test

1. Ran the existing packages/integrations/cloudflare/test/with-react.test.ts test
2. All 2 tests passed:
   • "renders the react component" ✓
   • "picomatch should be pre-optimized" ✓

Result

NOT REPRODUCED on the current codebase (Astro v7.2.7, @astrojs/cloudflare from workspace).

The bug was likely fixed between Astro v7.2.1 and v7.2.7. A relevant fix was found:

• PR fix: cloudflare ssr deps optimization #16708 (bb709ffdd): "fix: cloudflare ssr deps optimization" — Fixed a bug where a cascade of reloads caused page crashes during first visit with Cloudflare SSR due to dependency loading issues. This fix added ignoreOutdatedRequests: true to the Vite SSR optimizer config and additional virtual module entries to optimizeDeps.include. This was included in @astrojs/cloudflare@13.5.3.

However, the reporter claims to be using @astrojs/cloudflare@^14.2.1 which should include that fix. Other possibilities:

1. The issue may be bun-specific (reporter uses bun, we use pnpm/node)
2. There may have been additional fixes in the cloudflare adapter or Astro core between v7.2.1 and v7.2.7
3. The issue might be intermittent and timing-dependent

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[valkum]

I bumped the deps in the repro package.json and still can see the issue with both npm and bun.

Astro                    v7.2.7
Vite                     v8.2.2
Node                     v22.21.1
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  @astrojs/cloudflare (v14.2.5)
Integrations             @astrojs/react (v6.0.4)

[astro-factory]

Triage complete

• Prepare the workspace: ready
• Install dependencies: complete
• Build the project: complete
• Reproduce the issue: not reproduced
• Diagnose the cause: not needed (the issue was not reproduced)
• Verify the diagnosis: not needed (the issue was not reproduced)
• Attempt a fix: not needed (the issue was not reproduced)
• Publish the result: set triage: unable to reproduce

---

• Reproduced: No — the bug does not reproduce on the current main branch (Astro v7.2.7)
• Exploration: Already fixed — View branch
• Unit Test: No — the existing packages/integrations/cloudflare/test/with-react.test.ts already covers Cloudflare + React and passes
• Priority: P3: minor bug. This affects a specific adapter + framework combo during dev, and the reporter confirms it occurs in a standalone project outside the monorepo. Our monorepo-based reproduction may not trigger the same Vite dep optimization behavior.

I was unable to reproduce this on current main using three separate approaches: the existing with-react test fixture (with output: 'server'), a fresh fixture matching the reporter's exact config (no explicit output, cloudflare adapter, react integration, useState + client:load), and a rapid-fire timing test with 5 sequential requests after a clean Vite cache. All requests returned correctly rendered <astro-island> elements with no hook errors. The error stack trace (react/cjs/react.development.js) suggests Vite's SSR dep optimizer is loading a separate CJS copy of React that doesn't share state with the ESM copy used by @astrojs/react's renderer — a classic "multiple React instances" problem.

I was unable to determine the cause of this issue. The bug may be specific to how Vite resolves dependencies in a standalone project (outside a pnpm workspace/monorepo), where the dep optimizer's behavior can differ. Since the reporter confirms the issue persists after upgrading to v7.2.7 with both npm and bun, there may be unreleased fixes on main or a resolution difference between monorepo workspace links and published packages. If the issue persists on the next published release, a reproduction with npm (matching the reporter's confirmation) outside of a monorepo would help narrow down the root cause. Areas likely involved: packages/astro/src/vite-plugin-environment/index.ts (SSR optimizeDeps entries) and packages/astro/src/core/create-vite.ts (crawlFrameworkPkgs setup).

Full Triage Report

Issue Summary

Title: Invalid hook call during dev SSR with @astrojs/cloudflare and a React island

Reporter: @valkum

Description: When using @astrojs/cloudflare adapter with @astrojs/react integration and a React component that uses hooks (useState) as a client island (client:load), the first dev server request fails with:

[ERROR] [vite] Invalid hook call. Hooks can only be called inside of the body of a function component.
[ERROR] [vite] TypeError: Cannot read properties of null (reading 'useState')
    at Object.exports.useState (node_modules/react/cjs/react.development.js:1263:33)
    at ReproCounter (src/components/ReproCounter.tsx:4:29)
    at renderWithHooks (node_modules/.vite/deps_ssr/react-dom_server.js:2797:19)

The first response is only 420 bytes and contains no <astro-island> element. This is a follow-up to #16529 which was closed as "fixed in Astro 7."

Expected result: The first response renders the island correctly.

Minimal reproduction: https://github.com/valkum/astro-7-react-cloudflare-issue

Environment

Issue environment:

• Astro v7.2.1 (later bumped to v7.2.7)
• Node v22.21.1
• macOS (arm64)
• Package Manager: bun (also reported with npm)
• Adapter: @astrojs/cloudflare (^14.2.1, later ^14.2.5)
• Integration: @astrojs/react (^6.0.2, later ^6.0.4)

Triage environment:

• Astro v7.2.7 (from main branch, workspace:*)
• Node.js with pnpm workspace
• @astrojs/cloudflare: workspace (latest from main)
• @astrojs/react: workspace (latest from main)

Reproduction Attempts

Setup

Reproduced the reporter's exact setup:

• Cloudflare adapter (no explicit output setting, defaults to static)
• React integration
• A ReproCounter.tsx component using useState hook
• An index.astro page with <ReproCounter client:load />

Attempt 1: Using existing with-react fixture (output: 'server')

Added a hooks component (ReproCounter.tsx with useState) and a hooks page (hooks.astro with client:load) to the existing cloudflare with-react test fixture.

1. Cleared .vite cache and .astro directory
2. Started dev server on port 4321
3. Made first request: 5553 bytes, astro-island present, no errors
4. Made second request: 5530 bytes, astro-island present, no errors
5. Server logs: No errors at all

Result: NOT REPRODUCED

Attempt 2: Exact reporter config (no output setting)

Created a fresh fixture matching the reporter's exact config (no output field, cloudflare adapter, react integration, ReproCounter with useState, client:load).

1. Cleared .vite cache and .astro directory
2. Started dev server on port 4323
3. Made first request: 5566 bytes, astro-island present, no errors
4. Made second request: 5566 bytes, astro-island present, no errors
5. Server logs: No errors at all

Result: NOT REPRODUCED

Attempt 3: Rapid-fire requests (race condition test)

Started dev server with clean vite cache and made 5 rapid requests (2s apart) starting immediately when the server was available, to try to trigger the race condition the reporter described.

All 5 requests: 5543-5566 bytes, astro-island present, button element present, no "Invalid hook call" errors

Server logs: No errors at all

Result: NOT REPRODUCED

Existing test suite

The existing with-react.test.ts test in the cloudflare adapter passes successfully (2/2 tests pass).

Conclusion

The bug does not reproduce on the current main branch (Astro v7.2.7, latest @astrojs/cloudflare and @astrojs/react from source).

The reporter initially saw the issue on v7.2.1, then commented they still see it after bumping to v7.2.7 with both npm and bun. However, our triage uses workspace packages built from source, which may include unreleased fixes or differ in how Vite dependency optimization resolves packages in a monorepo vs standalone install.

Possible explanations for the discrepancy:

1. The fix might be in unreleased changes on main that haven't been published yet
2. The issue may be related to how dependencies are resolved in a standalone project vs monorepo (where workspace packages bypass some Vite optimization paths)
3. The issue might be intermittent and timing-dependent (though our rapid-fire test didn't trigger it)

The error stack trace points to Vite's SSR dep optimization loading a different copy of React (CJS development build via react/cjs/react.development.js) vs the one used by the framework renderer, causing the "Invalid hook call" error due to multiple React instances.

This report was made by an LLM. The analysis may be wrong, and the potential fix might not work, but is intended as a starting point for exploring the issue.

[matthewp]

Are you getting any messages about new deps being optimized?