Skip to content

fix(@astrojs/react): suppress spurious "Invalid hook call" warning in React 19 dev mode#17239

Open
FrancoKaddour wants to merge 3 commits into
withastro:mainfrom
FrancoKaddour:fix/react-check-hook-warning
Open

fix(@astrojs/react): suppress spurious "Invalid hook call" warning in React 19 dev mode#17239
FrancoKaddour wants to merge 3 commits into
withastro:mainfrom
FrancoKaddour:fix/react-check-hook-warning

Conversation

@FrancoKaddour

Copy link
Copy Markdown

Fixes #16767

In React 19 dev mode, the check() renderer probe calls the component inside a Tester wrapper during SSR. When the component uses hooks, React emits an "Invalid hook call" warning because the hooks run in Tester's render context instead of the component's own.

The warning is a false positive — the component works correctly. This wraps the probe render with a targeted console.error suppressor that filters only the "Invalid hook call" message, leaving all other errors intact.

@changeset-bot

changeset-bot Bot commented Jun 30, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7b8698f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 38 packages
Name Type
@astrojs/react Patch
@e2e/actions-blog Patch
@e2e/actions-react-19 Patch
@e2e/astro-island-hydration-error Patch
@test/astro-cloudflare Patch
@e2e/csp-server-islands Patch
@test/custom-client-directives Patch
@e2e/errors Patch
@e2e/react-component Patch
@e2e/server-islands Patch
@e2e/ts-resolution Patch
@e2e/view-transitions Patch
@performance/md Patch
@performance/mdoc Patch
@performance/mdx Patch
@test/0-css Patch
@test/astro-assets-prefix Patch
@test/astro-client-only Patch
@test/astro-component-bundling Patch
@test/astro-dynamic Patch
@test/astro-partial-html Patch
@test/astro-slots-nested Patch
@test/client-only-css-chunk-leak Patch
@test/component-library Patch
@test/react-container Patch
@test/core-image-svg-in-client Patch
@test/csp Patch
@test/css-deduplication Patch
@test/impostor-md-file Patch
@test/minification-html-jsx Patch
@test/slots-react Patch
@test/sourcemap Patch
@test/special-chars-in-component-imports Patch
@test/static-build-frameworks Patch
@test/view-transitions Patch
@test/astro-cloudflare-vite-plugin Patch
@test/astro-cloudflare-with-react Patch
@test/react-component Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions github-actions Bot added pkg: react Related to React (scope) pkg: integration Related to any renderer integration (scope) labels Jun 30, 2026

@fkatsuhiro fkatsuhiro left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FrancoKaddour san
Thank you for your implementation!
Could you create test for reproduce this issue? We want to provide occure same issue in the future.

@FrancoKaddour

Copy link
Copy Markdown
Author

Thanks for the review! Added a regression test in test/server-check.test.ts that sets up a hook-using component, intercepts console.error, calls check(), and asserts no "Invalid hook call" warning is emitted.

Direct import of server.ts fails at runtime because server.ts resolves
sibling imports as .js (ESM convention), which only exist after the
package is built. A fixture-based integration test is needed instead.
@FrancoKaddour

Copy link
Copy Markdown
Author

Apologies for the noise — had to revert the test in the follow-up commit. The test imported server.ts directly, but server.ts resolves sibling imports as .js (ESM convention pointing to compiled output), which doesn't exist when running source files in the test environment. The Node.js runner fails with ERR_MODULE_NOT_FOUND before any test runs.

A proper regression test for this needs to be a fixture-based integration test — an Astro project with a hook-using React component, capturing console.error output during check(). Happy to add that as a follow-up if you'd like.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

pkg: integration Related to any renderer integration (scope) pkg: react Related to React (scope)

2 participants