Why would upgrading to React 17.x from 16.x break my function like this?

I upgraded React to version:

“react”: “^17.0.2”,

Now, whenever I run the command npm run build,

I get the below:

# npm run build

> gamerProfile@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

./src/Header/Header.js
Syntax error: G:/Games/Manic/ClientApp/src/Header/Header.js: Unexpected token (33:9)

  31 |     }
  32 |     return (
> 33 |         <>
     |          ^
  34 |             <a id="gamerProfilePage" href="#" onClick={handleClick}>Gamer</a>
  35 |         </>
  36 |     );

The full function is:

const RenderGamerLink = ({ onClick }) => {
    function handleClick(ev) {
        ev.preventDefault();
        onClick && onClick()
    }
    return (
        <>
            <a id="gamerProfilePage" href="#" onClick={handleClick}>Gamer</a>
        </>
    );
}

I am not sure why it worked with React 16.x and is breaking with React 17.x?

Is there anything I can do?

thanks!

Answer

The syntax <></> is not supported by all tools, so use <React.Fragment> instead if it is breaking.

You can check this page on support for Fragment syntax