🐛 BUG: React + MDX: React is not defined

[cameronmcefee]

What version of astro are you using?

1.0.0-rc.2

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the Bug

Hello,

In the example provided, I have the Just the Basics template, with all updated dependencies, plus the React and MDX integrations. With just the React integration, things work as expected, but with the addition of the MDX integration, things fail with "React is not defined", attributed to the React integration.

[plugin:@astrojs/react] React is not defined
/home/projects/github-kgkmxz/src/components/Component.jsx:2:2
1 | const Component = () => {
> 2 |   return <p>Hello world</p>;
    |  ^
  3 | };
  5 | export default Component;
    at Component (/home/projects/github-kgkmxz/src/components/Component.jsx:2:2)
    at Tester (@astrojs/react/server.js:33:18)
    at renderWithHooks (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5662:16)
    at renderIndeterminateComponent (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5735:15)
    at renderElement (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:5950:7)
    at renderNodeDestructiveImpl (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6108:11)
    at renderNodeDestructive (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6080:14)
    at retryTask (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6532:5)
    at performWork (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6580:7)
    at eval (/home/projects/github-kgkmxz/node_modules/react-dom/cjs/react-dom-server-legacy.node.development.js:6904:12

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kgkmxz?file=src/pages/index.astro

Participation

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

[Aayush27032001]

@cameronmcefee issue got fixed after importing react from react in Component.jsx

You can checkout this,
https://stackblitz.com/edit/github-kgkmxz-hruukf?file=src/components/Component.jsx

[cameronmcefee]

Thanks @Aayush27032001, but that seems like a bandaid. Prior to adding the MDX integration, React is available and importing it is not necessary. After adding the MDX integration it is not, presumably indicating the MDX integration is manipulating something it probably shouldn't — or the docs should be updated to describe the expectations of the new behavior. Also worth noting, the symptomatic behavior happens in a non-MDX file, so the MDX integration may be making changes beyond its scope.

[cameronmcefee]

Ok, after spelunking a bit, I found what I think is the cause — I just don't know the appropriate way to resolve things.

In https://github.com/withastro/astro/blob/main/packages/astro/src/core/config.ts#L350-L354 there is a conditional that loads a specific render for MDX.

That will load in this render: https://github.com/withastro/astro/blob/main/packages/astro/src/jsx/renderer.ts The render points jsxImportSource and later importSource to astro. If I change both values to react, things work again. I suspect that the custom astro JSX implementation (I assume that is what this points to) either isn't passing the runtime: "automatic' through if that's applicable, or that it doesn't implement whatever that flag does when run through babel.

[matthewp]

Here's a reduced version: https://stackblitz.com/edit/github-kgkmxz-yig8qb?file=src%2Fpages%2Findex.astro,astro.config.mjs