Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Emotion does not support React.Fragment shortcut "<>...</>"
See original GitHub issueCurrent behavior:
To reproduce:
- Using <>…</> instead of <React.Fragment>…</React.Fragment>
Expected behavior:
I get an error error, ReferenceError: React is not defined
Environment information:
reactversion: 16.12@emotion/coreversion: ^10.0.27
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
Fragments - React
Fragments let you group a list of children without adding extra nodes to the DOM. There is also a new short syntax for...
Read more >React won't let me use React.Fragment - Stack Overflow
The problem seems to be with the React.Fragment call. × React.createElement: type is invalid -- expected a string (for built-in components) ...
Read more >what is react.fragment is used for Code Example - Code Grepper
Answers related to “what is react.fragment is used for” ... react fragment doesn't support property · fragment key error react · what is...
Read more >Using MDX
MDX is not coupled to React. You can also use it with Preact, Vue, Emotion, Theme UI, etc. Both the classic and automatic...
Read more >@react-ssr/static - npm
It can be ignored only when the project does not use any UI frameworks. Supported UI frameworks are: [x] default (the id default...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Yes, indeed. TS compiler doesnt allow for changing jsx pragma but leaving fragments intact:
you have to fall back to using
React.Fragment.@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.