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

[loganmccaul]

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[email protected]`

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.

[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 🎉!

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[stephank]

This issue is old, but I'm just now seeing these exact errors in our build. Specifically:

EDIT: Just now realized the error message is slightly different. Sorry for the noise of this is a separate issue.

$ gatsby build --prefix-paths
success open and validate gatsby-configs - 0.053s
success load plugins - 0.461s
success onPreInit - 0.027s
success delete html and css files from previous builds - 0.004s
success initialize cache - 0.008s
success copy gatsby files - 0.048s
success onPreBootstrap - 0.023s
success createSchemaCustomization - 0.008s
success Checking for changed pages - 0.003s
success source and transform nodes - 1.549s
success building schema - 0.232s
info Total nodes: 144, SitePage nodes: 1 (use --verbose for breakdown)
success createPages - 0.006s
success Checking for changed pages - 0.002s
success createPagesStatefully - 1.020s
success update schema - 0.024s
success onPreExtractQueries - 0.001s
success extract queries from components - 0.303s
success write out redirect data - 0.010s
success onPostBootstrap - 0.003s
info bootstrap finished - 7.347s
success run static queries - 1.761s - 1/1 0.57/s
success run page queries - 0.167s - 56/56 335.02/s
success write out requires - 0.006s
failed Building production JavaScript and CSS bundles - 19.851s

 ERROR #98123  WEBPACK

Generating JavaScript bundles failed

[...]/src/pages/index.mdx: pragma and pragmaFrag cannot be set when runtime is automatic.
> 1 | import * as React from 'react'
    | ^
  2 |   /* @jsx mdx */
  3 | import { mdx } from '@mdx-js/react';
  4 | /* @jsx mdx */

File: src/pages/index.mdx

[...lots more follow...]

Curiously, I can fix this for us by setting a Yarn resolution for @babel/plugin-transform-react-jsx all the way back to 7.8.3. None of the newer releases on npm appear to work.

[nicolo-ribaudo]

It's because you (or gatsby) is using the runtime: "automatic" option of the JSX transform, which wasn't supported in 7.8.3 so it doesn't have any effect.