React hook warning when using MDX

[olafsulich]

Astro Info

Astro                    v5.1.1
Node                     v22.4.0
System                   macOS (arm64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/tailwind
                         @astrojs/mdx

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

No response

Describe the Bug

I'm getting the react hooks warning on route change. It only shows up when I have enabled the MDX integration.

Related:

• React invalid hook call warning while using mdx and react integrations at the same time #8317
• Prevent React hook call warnings when used with MDX #8324

The whole message:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://react.dev/link/invalid-hook-call for tips about how to debug and fix this problem.

What's the expected result?

No warnings in the console

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-syektoew?file=astro.config.mjs

Participation

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

[dervism]

Having the same issue with 5.1.1. With the MDX-integration enabled I get this error:

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

Removing the mdx-integration and the error messages is gone.

[ascorbic]

Try running npm ls react to see if you have multiple copies of the package. That's usually the cause for these kinds of error.

[olafsulich]

@ascorbic, it looks like two react but with the same version (?). Here's how it looks for the example:

[CodeAndWeb]

Same here. I've created a clean project for that. As soon as react and mdx are both present in the astro config, using a hook triggers the warning.

Changing the order of the integration does not seem to have any influence.

npm ls react:

helpless-horizon@0.0.1 /Users/sk/Programming/_tmp/astro-react-test/helpless-horizon
├─┬ @astrojs/react@4.1.2
│ └── react@19.0.0 deduped
├─┬ react-dom@19.0.0
│ └── react@19.0.0 deduped
└── react@19.0.0

The waning only appears on the command line, not in the browser.

Reproduce:

https://github.com/CodeAndWeb/astro-react-mdx-hook-error

[ascorbic]

The error is coming from check() in @astrojs/mdx, here: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/server.ts#L10

[bluwy]

It seems to be related to React 19. I don't get any warnings with React 18. Related: #12686