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

Description

I’m getting the following error when compiling mdx files that contain 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

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

gatsby-plugin-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.

I’m going to open an issue to babel-plugin-transform-react-jsx for default behavior and to mdx-js to add the same as well.

Related issues:

• babel-plugin-transform-react-jsx: https://github.com/babel/babel/issues/11321
• mdx-js issue: https://github.com/mdx-js/mdx/issues/990

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]

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.