Fragments giving Unexpected token error in React 16.2

Question

I have the following component that renders a series of components. However, I downloaded React 16.2 and tried to use fragments instead of divs, but I get the following error:

Error in ./src/containers/answers.js
Syntax error: Unexpected token (24:5)

  22 |     
  23 | return (
> 24 |     <>
     |      ^
  25 |       {AnswersCard}
  26 |     </>
  27 |    )

Why am I getting this error when fragments are supposed to be able to replace divs in React 16.2?

  question ? 
    AnswersCard = ( question.answers.sort(function(a,b) { return (a.count < b.count) ? 1 : ((b.count > a.count) ? -1 : 0)} 
    ).map(answer =>  
    <Answer key={answer.id} answer={answer} questionId={question.id} />
    )) : AnswersCard = ( <p>Loading...</p> )

return (
    <>
      {AnswersCard}
    </>
   )
  }
}

Hangeron

maybe you have updated react 16.2 in global (-g) , not local, can u check package.json and reinstall? – Lands

i checked and it's react 16.2 in the component – Hangeron

You need to update your babel also reactjs.org/blog/2017/11/28/… – Foxe

that didn't work either. same error. – Hangeron

The current react version is 16.6 and it is supported now by all tools. – Devaney

Answer 1

As per the documentation, the syntax <></> is not supported by all tools and they encourage you to use <React.Fragment> instead

Check this documentation on Support for Fragment syntax

Bluh

@shubham Khatri You are life saver – Eldwun

Exactly you right, new XML/JSX syntax fragment, hence <></> needs to run with babel version 7. – Singularize

If you are using newer version of react via CRA and Gatsby. I don't think <> being unrecognized is still an issue. The recommended standard might have changed between this answer at in 2020. – Beekeeping

it's still an issue in Next.js + TSX – Cabby

2023 and it's still an issue following this tutorial: react.dev/learn/tutorial-tic-tac-toe#setup-for-the-tutorial – Xanthochroism

I was also following the tutorial and switching to a newer version of react-scripts solved it. More details here: https://mcmap.net/q/389897/-unexpected-token-at-gt-of-a-lt-gt – Geese