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

loganmccaul · 2020-03-23T18:32:02Z

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: babel-plugin-transform-react-jsx should use the default pragmaFrag if one isn't specified babel/babel#11321
gatsby-plugin-mdx: gatsby-plugin-mdx: jsxFrag should be set with latest version of @babel-plugin-transform-react-jsx gatsbyjs/gatsby#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.

The text was updated successfully, but these errors were encountered:

loganmccaul · 2020-03-23T19:26:00Z

Based on babel/babel#11321 (comment) it seems like up until babel/babel@748897b#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 · 2020-03-23T22:18:17Z

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 · 2020-03-24T14:18:20Z

We released a fix in 7.9.4 🎉!

wooorm · 2020-03-24T17:22:10Z

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

existentialism · 2020-03-24T17:25:01Z

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

wooorm · 2020-03-24T17:36:17Z

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

Thanks all!

johno · 2020-03-25T00:47:50Z

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 · 2020-03-25T07:11:26Z

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

nicolo-ribaudo · 2020-03-25T09:20:15Z

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

@jsxFrag

Replace /* @jsx mdx */ with /* @jsxFrag React.Fragment */

felixroos · 2020-04-24T11:40:47Z

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

wooorm · 2020-11-13T15:08:00Z

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?

@jsxFrag

This adds a `/* @jsxFrag mdx.Fragment */` next to the existing `/* @jsx mdx */` pragma. From MDX runtimes, this exports as `mdx.Fragment` either `React.Fragment` or `Preact.Fragment`. Vue 2 does not support fragments, but as JSX and hence MDX is already specific to React or Vue, well: folks shouldn’t use fragments in MDX files targeting Vue. As we have fragments, we can also use that to pass children through missing components: `<>{props.children}</>`. This fixes runtimes where HTML is not available, such as React Native. But, as Vue doesn’t like that, there’s a hidden flag to still use the original behavior: `<div {...props} />`. Still, there remains a difference in frameworks: Vue does not put `children` in `props`, so `{...props}` has never passed children along in Vue. Closes GH-972. Closes GH-990. Closes GH-1014.

@jsxFrag

This adds a `/* @jsxFrag mdx.Fragment */` next to the existing `/* @jsx mdx */` pragma. From MDX runtimes, this exports as `mdx.Fragment` either `React.Fragment` or `Preact.Fragment`. Vue 2 does not support fragments, but as JSX and hence MDX is already specific to React or Vue, well: folks shouldn’t use fragments in MDX files targeting Vue. As we have fragments, we can also use that to pass children through missing components: `<>{props.children}</>`. This fixes runtimes where HTML is not available, such as React Native. But, as Vue doesn’t like that, there’s a hidden flag to still use the original behavior: `<div {...props} />`. Still, there remains a difference in frameworks: Vue does not put `children` in `props`, so `{...props}` has never passed children along in Vue. Closes GH-972. Closes GH-990. Closes GH-1014.

@jsxFrag

This adds a `/* @jsxFrag mdx.Fragment */` next to the existing `/* @jsx mdx */` pragma. From MDX runtimes, this exports as `mdx.Fragment` either `React.Fragment` or `Preact.Fragment`. Vue 2 does not support fragments, but as JSX and hence MDX is already specific to React or Vue, well: folks shouldn’t use fragments in MDX files targeting Vue. As we have fragments, we can also use that to pass children through missing components: `<>{props.children}</>`. This fixes runtimes where HTML is not available, such as React Native. But, as Vue doesn’t like that, there’s a hidden flag to still use the original behavior: `<div {...props} />`. Still, there remains a difference in frameworks: Vue does not put `children` in `props`, so `{...props}` has never passed children along in Vue. Closes GH-972. Closes GH-990. Closes GH-1014.

@jsxFrag

This adds a `/* @jsxFrag mdx.Fragment */` next to the existing `/* @jsx mdx */` pragma. From MDX runtimes, this exports as `mdx.Fragment` either `React.Fragment` or `Preact.Fragment`. Vue 2 does not support fragments, but as JSX and hence MDX is already specific to React or Vue, well: folks shouldn’t use fragments in MDX files targeting Vue. As we have fragments, we can also use that to pass children through missing components: `<>{props.children}</>`. This fixes runtimes where HTML is not available, such as React Native. But, as Vue doesn’t like that, there’s a hidden flag to still use the original behavior: `<div {...props} />`. Still, there remains a difference in frameworks: Vue does not put `children` in `props`, so `{...props}` has never passed children along in Vue. Closes GH-972. Closes GH-990. Closes GH-1014. Closes GH-1394. Reviewed-by: Christian Murphy <christian.murphy.42@gmail.com> Reviewed-by: John Otander <johnotander@gmail.com>

loganmccaul added 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Mar 23, 2020

This was referenced Mar 23, 2020

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

Closed

babel-plugin-transform-react-jsx should use the default pragmaFrag if one isn't specified babel/babel#11321

Closed

existentialism mentioned this issue Mar 23, 2020

Restore default pragmas in preset-react for classic runtime babel/babel#11324

Merged

wooorm closed this as completed Mar 24, 2020

wooorm added 👀 no/external This makes more sense somewhere else and removed 🐛 type/bug This is a problem 🙉 open/needs-info This needs some more info labels Mar 24, 2020

wooorm reopened this Mar 25, 2020

johno added good first issue 👋 This may be a great place to get started! help wanted 🙏 This could use your insight or help labels Mar 25, 2020

adammockor added a commit to adammockor/mdx that referenced this issue Apr 13, 2020

Fixes mdx-js#990

cb5ad8d

Replace /* @jsx mdx */ with /* @jsxFrag React.Fragment */

wooorm added 🗄 area/interface This affects the public interface 🙆 yes/confirmed This is confirmed and ready to be worked on and removed 👀 no/external This makes more sense somewhere else labels Apr 14, 2020

This comment has been minimized.

Sign in to view

eric-burel mentioned this issue Nov 20, 2020

Upgrading to Next.js 10 and React 17 - Webpack build fails with pragma has been set but pragmaFrag has not been set vercel/next.js#18461

Closed

wooorm mentioned this issue Dec 19, 2020

Add jsxFrag pragma, use fragment for shortcode warning #1394

Merged

wooorm closed this as completed in #1394 Dec 20, 2020

wooorm added 💪 phase/solved Post is done and removed good first issue 👋 This may be a great place to get started! help wanted 🙏 This could use your insight or help 🙆 yes/confirmed This is confirmed and ready to be worked on labels Dec 20, 2020

Vadorequest mentioned this issue Jan 11, 2021

"Error: Webpack Compilation Error" with "pragma and pragmaFrag cannot be set when runtime is automatic" when changing Babel configuration with Next.js cypress-io/cypress#14471

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

loganmccaul commented Mar 23, 2020 •

edited

loganmccaul commented Mar 23, 2020

nicolo-ribaudo commented Mar 23, 2020

existentialism commented Mar 24, 2020

wooorm commented Mar 24, 2020

existentialism commented Mar 24, 2020

wooorm commented Mar 24, 2020

johno commented Mar 25, 2020

wooorm commented Mar 25, 2020

nicolo-ribaudo commented Mar 25, 2020

felixroos commented Apr 24, 2020

This comment has been minimized.

This comment has been minimized.

wooorm commented Nov 13, 2020

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

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

Comments

loganmccaul commented Mar 23, 2020 • edited

Subject of the issue

Your environment

Steps to reproduce

Expected behaviour

Actual behaviour

loganmccaul commented Mar 23, 2020

nicolo-ribaudo commented Mar 23, 2020

existentialism commented Mar 24, 2020

wooorm commented Mar 24, 2020

existentialism commented Mar 24, 2020

wooorm commented Mar 24, 2020

johno commented Mar 25, 2020

wooorm commented Mar 25, 2020

nicolo-ribaudo commented Mar 25, 2020

felixroos commented Apr 24, 2020

This comment has been minimized.

This comment has been minimized.

wooorm commented Nov 13, 2020

loganmccaul commented Mar 23, 2020 •

edited