Emotion: Emotion does not support React.Fragment shortcut "<>...</>"

[wyeo]

Current behavior:

To reproduce:

1. Using <>... instead of ...

Expected behavior:

I get an error error, ReferenceError: React is not defined

Environment information:

• react version: 16.12
• @emotion/core version: ^10.0.27

[Andarist]

Could you prepare a repro case?

[wyeo]

Yes sorry
it's happened only with Storybook

import React from "react"

/** @jsx jsx */
import { jsx, css } from "@emotion/core"

const divStyle = css`
  color: blue;
`

export default ({ text }: Props) => (
    <><div css={divStyle}>{text}</div></>
)

and i got : "ReferenceError: React is not defined"

[Andarist]

Could you prepare a runnable repro case? I'm afraid I don't have time to set up things myself and you, already experiencing the problem, should have a far way easier time to do so. Then I could quickly take a look at the repro case to help you find the problem.

[jonavila]

@wyeo Even though I don't see an interface or type in your sample, it looks like you are using Typescript based on what looks to be like a Props type. Emotion's docs state that React's fragment shorthand syntax doesn't work with pure Typescript.

I created a Codesandbox to reproduce what you are seeing here:
https://codesandbox.io/s/sleepy-sea-rdrqg

Notice the TS17017 error.

Similar code in plain JS works fine:
https://codesandbox.io/s/unruffled-matsumoto-9kwjh

FYI @Andarist. Probably not a bug if indeed it is TS.

[Andarist]

Yes, indeed. TS compiler doesnt allow for changing jsx pragma but leaving fragments intact:

JSX fragment is not supported when using an inline JSX factory pragma(17017)

you have to fall back to using React.Fragment.

[wyeo]

Okay i understand now. Thank you both 😊