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

[shakib609]

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

[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.

[shakib609]

Thanks for the explanation. :+1:
Should I open an issue in eslint-plugin-react to solve this?

[Andarist]

If they have rules for jsx itself requiring a React to be in scope or custom jsx pragma, then yes - it should account for Fragments as well. Please verify if it ain't handled already before reporting an issue.

[shakib609]

Ok. I'll take a look. :)
Closing this for now.

[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.