fix(gatsby-plugin-emotion): allow for React.Fragment shorthand syntax

[wKovacs64]

This change resolves the following error thrown by @babel/plugin-transform-react-jsx when using the React.Fragment shorthand syntax (<> </>) in conjunction with emotion v10 and gatsby-plugin-emotion v3:

Error: transform-react-jsx: pragma has been set but pragmafrag has not been set

[DSchau]

I'll check this out in further detail, but are you sure this is the fix? Per the documentation this is apparently the default?

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", {
      "pragma": "dom", // default pragma is React.createElement
      "pragmaFrag": "DomFrag", // default is React.Fragment
      "throwIfNamespace": false // defaults to true
    }]
  ]
}

[wKovacs64]

The error went away and it started working when I made this change locally. 🤷‍♂️ I mentioned in the Emotion RFC for their upcoming Babel preset and Mitchell included it there.

[janicduplessis]

I've also hit this issue when upgrading and can confirm that it fixes it. Kind of weird that babel forces you to specify both instead of keeping the default value.

[t2ca]

Since the update to V10, the code below stopped working. Any ideas how to fix this?

const getNavItemStyles = ({ isCurrent }) =>
  isCurrent
    ? {
        className: css({
          ...styles.link.default,
          ...styles.link.active,
        }),
      }
    : {
        className: css({
          ...styles.link.default,
        }),
      }

const MobileNavItem = ({ linkTo, label, icon }) => (
  <Link to={linkTo} getProps={getNavItemStyles}>
    <span>{icon}</span>
    <div>{label}</div>
  </Link>
)

Im getting this as a result

<a aria-current="page" class="[object Object]" href="/">

Update

So i resolved the issue by changing

import { css } from '@emotion/core'

to

import { css } from 'emotion'

[DSchau]

@t2ca that's due to a change in emotion. className isn't produced from that css call any longer.

See this document for more info.

[t2ca]

Thank you @DSchau, I was able to find a solution!

[DSchau]

Successfully published:
 - [email protected]