The project in question is using React-16.2.0 which has the capability to use Fragments and the Fragment shorthand.
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html
While the full-length syntax works fine…
import React, { Fragment, Component } from 'react'; class TestingFragment extends Component { render() { return ( <Fragment> <span>This is a fragment of text </span> <div>Another part of the fragment</div> </Fragment> ) } }; export default TestingFragment
The shorthand fails to compile and I am at a loss as to why this is. Fore example…
import React, { Component } from 'react'; class TestingFragment extends Component { render() { return ( <> <span>This is a fragment of text </span> <div>Another part of the fragment</div> </> ) } }; export default TestingFragment
Which fails to compile as follows…
Failed to compile ./src/testingFragments.js Syntax error: Unexpected token (6:4) 4 | render() { 5 | return ( > 6 | <> | ^ 7 | <span>This is a fragment of text </span> 8 | <div>Another part of the fragment</div> 9 | </> This error occurred during the build time and cannot be dismissed.
Is there something here I am missing about the Fragment shorthand syntax?
Advertisement
Answer
I think this is a reason:
https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html#support-for-fragment-syntax
create-react-apps currently use Babel 6.26.0 for full support React.Fragment is needed Babel v7.0.0-beta.31 and above
======================= EDIT
It’s working now with create-react-app v2 https://reactjs.org/blog/2018/10/01/create-react-app-v2.html