Module build failed (from ../../react/node_modules/babel-loader/lib/index.js)

Question

I am trying to run react code that renders tic-tak-to but I get the error "Module build failed" and "SyntaxError". I have looked for possible solutions but didn't find anything helpful.

The whole code snippet

import React, { useState } from 'react';
import { createRoot } from 'react-dom/client';

const rowStyle = {
  display: 'flex'
}

const squareStyle = {
  'width':'60px',
  'height':'60px',
  'backgroundColor': '#ddd',
  'margin': '4px',
  'display': 'flex',
  'justifyContent': 'center',
  'alignItems': 'center',
  'fontSize': '20px',
  'color': 'white'
}

const boardStyle = {
  'backgroundColor': '#eee',
  'width': '208px',
  'alignItems': 'center',
  'justifyContent': 'center',
  'display': 'flex',
  'flexDirection': 'column',
  'border': '3px #eee solid'
}

const containerStyle = {
  'display': 'flex',
  'alignItems': 'center',
  'flexDirection': 'column'
}

const instructionsStyle = {
  'marginTop': '5px',
  'marginBottom': '5px',
  'fontWeight': 'bold',
  'fontSize': '16px',
}

const buttonStyle = {
  'marginTop': '15px',
  'marginBottom': '16px',
  'width': '80px',
  'height': '40px',
  'backgroundColor': '#8acaca',
  'color': 'white',
  'fontSize': '16px',
}

function Square({ value, onClick }) {
  return (
    <div
      className="square"
      style={squareStyle}
      onClick={onClick}>
      {value}
    </div>
  );
}

function Board() {
  const[board, setBoard] = useState(Array(9).fill(null));
  const[isXNext, setIsXNext] = useState(true);
  const[winner, setWinner] = useState(null);

  const handelClick = (index) => {
    if (board[index] || winner) return;

    const newBoard = [...board];
    newBoard[index] = isNext ? 'X' : 'O';
    setBoard(newBoard);
    setIsXNext(!isXNext);
    const winner = calculateWinner(newBoard);
    if (winner) {
      setWinner(winner);
    }

    const calculateWinner = (squares) => {
      const lines = [
      [0, 1, 2], [3, 4, 5], [6, 7, 8],
      [0, 3, 6], [1, 4, 7], [2, 5, 8],
      [0, 4, 8], [2, 4, 6]
      ];

      for (let[a, b, c] of lines) {
        if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
          return squares[a];
        }
      }

      return null;
    }

    const resetBoard = () => {
      setBoard(Array(9).fill(null));
      setIsXNext(true);
      setWinner(null);
    };

    const status = winner ? `winner: ${winner}` : `Next player: ${isNext ? 'X' : 'O'}`;


  return (
    <div style={containerStyle} className="gameBoard">
      <div id="statusArea" className="status" style={instructionsStyle}>Next player: <span>X</span></div>
      <div id="winnerArea" className="winner" style={instructionsStyle}>Winner: <span>None</span></div>
      <button style={buttonStyle}>Reset</button>
      <div style={boardStyle}>
        <div className="board-row" style={rowStyle}>
          <Square />
          <Square />
          <Square />
        </div>
        <div className="board-row" style={rowStyle}>
          <Square />
          <Square />
          <Square />
        </div>
        <div className="board-row" style={rowStyle}>
          <Square />
          <Square />
          <Square />
        </div>
      </div>
    </div>
  );
}

function Game() {
  return (
    <div className="game">
      <div className="game-board">
        <Board />
      </div>
    </div>
  );
}

const container = document.getElementById('root');
const root = createRoot(container);
root.render(<Game />);

The whole code is of one file. The error mainly shows for the last lines of code. For which I have checked the syntax, it's correct but still the error persists.

Answer 1

You forget to close Board component.

1. add another } at the end of Board component
2. also in Square component > is missing for <div