@emotion/core doesn't handle React.Fragment shorthand correctly.

Current behavior: Throws an error “React is not defined”. If React is imported then throws a warning “‘React’ is defined but never used.”

To reproduce:

1. Create an app with create-react-app
2. Create a component which uses jsx instead of React.
3. Use React.Fragment shorthand as the container of that component.
4. Import the component and render it.

CodeSandbox: https://codesandbox.io/s/pensive-edison-bdkpp

Expected behavior: It would be great if emotion could handle the shorthand out of the box. If not, it should not at least warn me about React not being used.

Environment information:

• react version: 16.10.2
• @emotion/core version: 10.0.21

[justingrant]

@shakib609 @Andarist - I think that the issue tracking this problem is https://github.com/yannickcr/eslint-plugin-react/issues/2156. I added this comment to the end of that issue.

P.S. - Anyone ending up here from Google, the workaround is simple: use <React.Fragment> instead of the shorthand <> syntax.

[Andarist]

It would be great if emotion could handle the shorthand out of the box.

It can’t - because it’s handled by Babel and not by Emotion.

If not, it should not at least warn me about React not being used.

You get runtime Uncaught ReferenceError: React is not defined. Emotion can’t handle this because it’s not capable of doing static analysis. This is a job for ESLint.