Unexpected token at `>` of a `<>`

Question

I'm trying to follow Tic-Tac-Toe tutorial on React in my local environment. However, when I run npm start, I get a syntax error around <>.

How to reproduce

1. In the middle of the tutorial, under "At this point your code should look something like this:", click Fork in the upper right corner of the example code with the numbers from 1 to 9 written in a table.
2. Click the button in the upper left corner of the Code Sandbox, navigate to File, then Export to Zip, and download the code example as a Zip file.
3. Unzip the downloaded Zip file, and execute npm install and npm start in that order in the project root directory.
4. The following error message is displayed.

./src/App.js
Syntax error: Unexpected token (3:5)

  1 | export default function Board() {
  2 |   return (
> 3 |     <>
    |      ^
  4 |       <div className="board-row">
  5 |         <button className="square">1</button>
  6 |         <button className="square">2</button>

Question

How can I resolve this error? Although I can continue the tutorial online, I would prefer to continue it in a local environment where I can get assistance from lsp, formatters, etc.

Version Information

Node.js: v18.12.1

npm: 8.19.2

npm view react version on the project root: 18.2.0

Answer 1

If you can't use Fragment Short syntax "<></>" use the longhand version OR make sure you have the extensions required for react in your Editor/IDE. There are more here that help with other items like formatting.

import React from "react";
    
export default function Square() {
    return (
        <React.Fragment> 
             <button className="square">X</button>
        </React.Fragment>
    );
}

The LSP for JavaScript should be setup by default. For Typescript it doesn't setup one, rather consuming the tsserver directly.

Answer 2

I had this problem, and I noticed that react-scripts was at version 1.0.0 in node_modules/react-scripts/package.json but much newer versions are available.

I made this change to my root-level package.json (there are two package files the main project, plus more in node_modules, so make sure you edit the right one):

--- a/package.json
+++ b/package.json
@@ -6,7 +6,7 @@
   },
   "main": "/index.js",
   "devDependencies": {
-    "react-scripts": "1.0.0"
+    "react-scripts": "^5.0.0"
   },
   "name": "ljg0t8",
   "description": null,

That's copying the value already used by react-scripts in the dependencies section to the instance of react-scripts in the devDependencies section.

I then ran npm install, then npm start and everything worked.

(When running npm start, I was prompted to add browser compatibility info to package.json. Saying yes did that automatically.)

Answer 3

I just would wrap it in a "div" tag v.s. having an empty such as is suggested in the tutorial.

Example:

import React from "react";

export default function Square() {
  return (
    <div>
      <button className="square">X</button>
      <button className="square">X</button>
      <button className="square">X</button>
    </div>
  );
}

This was the work around I used to keep going on. Seems like a bug with JSX at compilation.