React hook warning when using MDX
Opened this issue · 14 comments
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:
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.
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:
- You might have mismatching versions of React and the renderer (such as React DOM)
- You might be breaking the Rules of Hooks
- You might have more than one copy of React in the same app
Removing the mdx-integration and the error messages is gone.
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.
@ascorbic, it looks like two react but with the same version (?). Here's how it looks for the example:
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:
Bump.
The error is coming from check() in @astrojs/mdx, here: https://github.com/withastro/astro/blob/main/packages/integrations/mdx/src/server.ts#L10
It seems to be related to React 19. I don't get any warnings with React 18. Related: #12686
Same thing happening when using React 19
Is this a real fix or is it just disabling the error messages?
It's a real fix. We had a code path that's testing if a React component is an MDX component (using MDX apis) where we don't really have to do that check in the first place. The error message is a side effect of using MDX apis on the React component, which wouldn't had affect users in practice.
Thanks for the fix!
Re-opening as the above PR had caused regressions elsewhere
I’m curious about the current status of this issue. The PR was reverted, but the 'has workaround' tag is still present. What is the recommended solution or workaround at this point? Should we stick with React 18 for now?
I've replaced it with "nice to have" because the warning can be safely ignored. We certainly want to fix this, but the warning refers to the MDX check function and doesn't affect your site code.