Mdx: jsxFrag should be set with latest version of @babel-plugin-transform-react-jsx

[loganmccaul]

Subject of the issue

I'm getting the following error when compiling mdx files that use a React Fragment, <></> on a Gatsby site.

transform-react-jsx: pragma has been set but pragmaFrag has not been set

The issue is because MDX specifies /* @jsx mdx */ as the pragma, but never specifies a pragmaFrag which is now a requirement with[email protected]`

See the note here:
https://babeljs.io/docs/en/next/babel-plugin-transform-react-jsx.html#customizing-with-the-classic-runtime

Your environment

• OS: Mac OS mojave
• Packages: @mdx-js/mdx, @mdx-js/parcel-plugin-mdx, gatsby-plugin-mdx (Plus others I'm sure)
• Env: node 12.14, npm 6.13

Steps to reproduce

Unfortunately the code is private so I can't provide it as an example, but let me know if you want me to recreate in a public repo.

Expected behaviour

MDX should set a jsxFrag value when specifying a custom jsx pragma.

So for example, every time /* @jsx mdx */ is set /* @jsxFrag ... */ should also be set.

Alternatively, babel-plugin-transform-react-jsx should use the default React.Fragment if none is specified.

Related issues:

• babel-plugin-transform-react-jsx: https://github.com/babel/babel/issues/11321
• gatsby-plugin-mdx: https://github.com/gatsbyjs/gatsby/issues/22500

Let me know if there's a fragment pragma that makes sense and I'd be happy to do a PR.

Actual behaviour

babel-plugin-transform-react-jsx throws an error.

[loganmccaul]

Based on https://github.com/babel/babel/issues/11321#issuecomment-602797032 it seems like up until https://github.com/babel/babel/commit/748897be0772d3569c92c26e061ba05ac26563b4#diff-8c3c9c6362e23bd456da3fb129f49a57L10 mdx-js has been relying on React.Fragment being passed in from preset-react. Since that has now been removed, I think a fix would be to add

/* @jsxFrag React.Fragment */

Anywhere where /* @jsx mdx */ is specified.

Let me know if that makes sense and I'd be happy to do a PR.

[nicolo-ribaudo]

Note: we are restoring the old behavior of not throwing when using the preset, but I recommend enabling the fragment option since we'll re-introduce the error in Babel 8.

[existentialism]

We released a fix in 7.9.4 🎉!

[wooorm]

Thanks all! Those changes should solve this issue, right? Is there something else we should do in MDX?

[existentialism]

Should be solved, but keep in mind we will remove the default in Babel 8!

[wooorm]

Alright, I’ll close this here, and we’ll solve for it when upgrading to babel 8 when it’s out.

Thanks all!

[johno]

Should we keep this open, @wooorm, and update the React loader and runtime? We'll just be specifying the current default anyway and that means we won't have to cut a new version to support babel 8 AFAIK, so we'll be more future proof.

Thanks for your hard work @nicolo-ribaudo and @existentialism, we def appreciate you keeping the same behavior and waiting for babel 8 💟🙏

[wooorm]

If changing something here means both current and future Babel works, then, yeah! 👍

[nicolo-ribaudo]

Yes, explicitly setting the options should make it work both with Babel 7 and 8!

[felixroos]

I am not sure if this is directly related, but parcel-plugin-mdx fails bundling mdx files that use fragments. Example use case:

## MDX Test

import { State } from "react-powerplug"

<State initial={{ count: 1 }}>
  {({ state, setState }) => (
    <>
      <p>{state.count}</p>
      <button onClick={() => setState({ count: state.count + 1 })}>
        increment
      </button>
    </>
  )}
</State>

Getting error:

react-dom.development.js:27795 Uncaught TypeError: Cannot read property 'mdxType' of null

I could also open a seperate issue..
Huge thanks for mdx as it is a very convenient way to write

[likerRr]

I confirm, this issue still reproduces in my project (next + mdx). Can't use <></>, get the same error as in the previous comment. As I can see, next uses @babel/preset-react": "7.10.4

[treyhuffine]

@likerRr Same here using a next + mdx project

[wooorm]

These three comments above are unrelated to the original issue. The original issue was something fixed by Babel, but as they’ve changed it in their v8, we still need support for @jsxFrag here, and we have an open pr for that: #1014.

For the new comments, this seems to be a different bug around fragments. I’d appreciate it if someone could debug some more and either post a new issue or maybe even raise a PR?