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

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 babel-plugin-transform-react-jsx@7.9.x`

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.

[existentialism]

We released a fix in 7.9.4 🎉!

[nicolo-ribaudo]

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