React rendering/fragments/syntax/unexpected token

Question

My problem is that it rendered fine the other day. I checked out a devCopy to continue where I left off and only installed npm packages, no code was changed. I expected to see it render just fine with no problems but the error message: Syntax error - unexpected token.

   99 | 
  100 |         return (
> 101 |             <>
      |              ^
  102 |                 {/* Link to scoreboard */}
  103 |                 <Link to="/" className="board-link">Return to Scoreboard?</Link>
  104 | 

I have tried making it a div tag in its place. This did not resolve the error, just made it worse.

I see no errors in my VS Code Editor and this is a message showing after running: yarn start storybook

I am trying to use storybook to test React Components.

I'm seeing that is not that great anymore, but the problem I see here has nothing to do with that as it was rendering the code just fine.

Again, no code was changed...

Why is this happening? What can I do to solve this and why is it like this one day then not work the next?

I do not expect all my questions to be answered by anyone, but if someone can help, I just want to make it work even if I must change the code.

Here is the file in question: board.jsx

  * src/components/board.jsx
  */
import React from 'react'
import { Link } from 'react-router-dom'

// Import Storage object
import { Storage } from './../storage/storage'

// Import Box component
import { Box } from './board-box'

// Import utility functions
import * as utils from '../utils/functions'

// Create Board component
export class Board extends React.Component {
    constructor(props) {
    super(props)

        // Initialize component state
        this.state = {
            boxes: Array(9).fill(null),
            history: [],
            xIsNext: true
        }
    }

    // Create instance of Storage object
    storage = new Storage()

    // Handle click on boxes on the board.
    handleBoxClick(index) {
        // get current state of boxes
        const boxes = this.state.boxes.slice()

        // Get current state of history
        let history = this.state.history

        // Stop the game if board contains winning combination
        if (utils.findWinner(boxes) || boxes[index]) {
            return
        }

        // Stop the game if all boxes are clicked (filled)
        if(utils.areAllBoxesClicked(boxes) === true) {
            return
        }

        // Mark the box either as 'x' or 'o'
        boxes[index] = this.state.xIsNext ? 'x' : 'o'

        // Add move to game history
        history.push(this.state.xIsNext ? 'x' : 'o')

        // Update component state with new data
    this.setState({
            boxes: boxes,
            history: history,
            xIsNext: !this.state.xIsNext
        })
    }

    // Handle board restart - set component state to initial state
    handleBoardRestart = () => {
        this.setState({
            boxes: Array(9).fill(null),
            history: [],
            xIsNext: true
        })
    }

    render() {
        // Get winner (if there is any)
    const winner = utils.findWinner(this.state.boxes)

        // Are all boxes checked?
    const isFilled = utils.areAllBoxesClicked(this.state.boxes)

        // Status message
    let status

        if (winner) {
            // If winner exists, create status message
            status = `The winner is: ${winner}!`

            // Push data about the game to storage
            this.storage.update([`${winner} won`])
        } else if(!winner && isFilled) {
            // If game is drawn, create status message
            status = 'Game drawn!'

            // Push data about the game to storage
            this.storage.update(['Game drawn'])
        } else {
            // If there is no winner and game is not drawn, ask the next player to make a move
            status = `It is ${(this.state.xIsNext ? 'x' : 'o')}'s turn.`
        }

        return (
            <>
                {/* Link to scoreboard */}
                <Link to="/" className="board-link">Return to Scoreboard?</Link>

                {/* The game board */}
                <div className="board-wrapper">
                    <div className="board">
                        <h2 className="board-heading">{status}</h2>

                        <div className="board-row">
                            <Box value={this.state.boxes[0]} onClick={() => this.handleBoxClick(0)} />

                            <Box value={this.state.boxes[1]} onClick={() => this.handleBoxClick(1)} />

                            <Box value={this.state.boxes[2]} onClick={() => this.handleBoxClick(2)} />
                        </div>

                        <div className="board-row">
                            <Box value={this.state.boxes[3]} onClick={() => this.handleBoxClick(3)} />

                            <Box value={this.state.boxes[4]} onClick={() => this.handleBoxClick(4)} />

                            <Box value={this.state.boxes[5]} onClick={() => this.handleBoxClick(5)} />
                        </div>

                        <div className="board-row">
                            <Box value={this.state.boxes[6]} onClick={() => this.handleBoxClick(6)} />

                            <Box value={this.state.boxes[7]} onClick={() => this.handleBoxClick(7)} />

                            <Box value={this.state.boxes[8]} onClick={() => this.handleBoxClick(8)} />
                        </div>
                    </div>

                    <div className="board-history">
                        <h2 className="board-heading">Moves:</h2>

                        {/* List with history of moves */}
                        <ul className="board-historyList">
                            {this.state.history.length === 0 && <span>We're waiting...</span>}

                            {this.state.history.length !== 0 && this.state.history.map((move, index) => {
                                return <li key={index}>Move {index + 1}: <strong>{move}</strong></li>
                            })}
                        </ul>
                    </div>

                    {/* Button to start new game */}
                    {winner && <div className="board-footer">
                        <button className="btn" onClick={this.handleBoardRestart}>New Game?</button>
                    </div>}
                </div>
            </>
        )
    }
}

Answer 1

After researching this further, I read that w/ create-react-app jest testing libs are already there. So, When I added a new library in my devCopy, I messed up the package modules.

See ( https://create-react-app.dev/docs/running-tests/ ). Note: *that feature is available with react-scripts@0.3.0 and higher. *

The solution for me here is to just delete that copy and git checkout a new branch and keep all this in mind going forward.