React invalid hook call warning while using mdx and react integrations at the same time

[rk-terence]

Astro info

Astro version            v3.0.3
Package manager          pnpm
Platform                 darwin
Architecture             arm64
Adapter                  Couldn't determine.
Integrations             @astrojs/mdx, @astrojs/react

What browser are you using?

Safari

Describe the Bug

When opening localhost:4321/ in my browser, the dev server will log the following error, if we use both the @astrojs/mdx and @astrojs/react integrations.

Warning: 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://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

There will be no warning if I first build the project and run astro preview.

After some digging, I have found that this is related to the astro:jsx renderer. When running this renderer's check function, the warning will be logged. In addition, removing the @astrojs/mdx integration also fixes this.

What's the expected result?

It would be better if no warning is shown in the console during development.

Link to Minimal Reproducible Example

https://github.com/rk-terence/mre-invalid-hook-call-in-react

Participation

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

[rk-terence]

I have checked #4220, but using export default function Blabla () {} syntax does not fix it.

[rk-terence]

Also, if in astro.config.mjs file we change the order of mdx and react to

export default defineConfig({
  integrations: [react(), mdx()]
});

the warning will disappear.

[matthewp]

Thanks! The astro:jsx renderer is a special-case and we should probably make it so that order doesn't matter in this case. I'll fix this.

[dirkjf]

@matthewp, this issue appears to be back. My config looks like this:

export default defineConfig({
  plugins: ["prettier-plugin-astro"],
  integrations: [
    react(), mdx()
  ],
  i18n,
  routing: {
    prefixDefaultLocale: false
  },
  vite: {
    build: {
      assetsInlineLimit: 0
    },
    plugins: [
      react(),
      svgr()
    ]
  }
});

Using

astro 4.6.3
@astrojs/mdx: 2.3.1
@astrojs/react: 3.3.0

Removing the mdx integration the warning goes away.

[DarrenBaldwin07]

@matthewp, this issue appears to be back. My config looks like this:

export default defineConfig({
  plugins: ["prettier-plugin-astro"],
  integrations: [
    react(), mdx()
  ],
  i18n,
  routing: {
    prefixDefaultLocale: false
  },
  vite: {
    build: {
      assetsInlineLimit: 0
    },
    plugins: [
      react(),
      svgr()
    ]
  }
});

Using

astro 4.6.3
@astrojs/mdx: 2.3.1
@astrojs/react: 3.3.0

Removing the mdx integration the warning goes away.

This is happening to me too and my integrations are in this order: [react(), mdx()]