反应棋盘与 chess.js 未捕获的 TypeError

Question

I am trying to implement react-chessboard with chess.js to my website so that I can evaluate a position that a user can create themselves, I am not trying to verify legal moves. Here is my code:

import React from 'react';

import {useState} from 'react';
import {Chessboard} from 'react-chessboard';
import {Chess} from 'chess.js';

const Board = () => {
    const [game, setGame] = useState(new Chess());

    const makeMove = (move) => {
        const gameCopy = {...game};
        gameCopy.move(move);
        setGame(gameCopy);
        return;
    }

    const onDrop = (startSquare, endSquare) => {
        makeMove({
            from: startSquare,
            to: endSquare,
        });
        return;
    }


  return <Chessboard position={game.fen()} onPieceDrop={onDrop} />;

}

export default Board;

When I try to make a move on the webpage it gives this error: Uncaught TypeError: gameCopy.move is not a function.

The code is straight from the react-chessboard documentation so I'm not sure why there is an error.

How can I fix this?

Thank you

Answer 1

It seems it thinks that gameCopy.move is not a function, and you try to use it as such here: gameCopy.move(move); .

I am not familiar with the react-chessboard documentation, but have you made any changes to the code? Most often if you have such function it is either that you have not initiated a gameCopy, or you have forgotten to import something.

Answer 2

You're importing chess.js incorrectly I believe

You're doing:

import {Chess} from 'chess.js';

The react-chessboard documentation shows:

import Chess from "chess.js";

Answer 3

The dependencies for the example in react-chessboard show the chess.js version "^0.12.0", which you could install and the example would work as expected. At the time of writing this chess.js is on version "1.0.0-alpha.0", which presents the issue you described because the ongoing game is written as a class 'Chess', which you instantiate in the useState() definition. When you spread {...game} in gameCopy you lose the class methods and only retain the variables.

To integrate with the latest version of chess.js I would recommend storing the fen in state and updating that when valid moves are made.

const Board = () => {
    const [game] = useState(new Chess());
    const [fen, setFen] = useState(game.fen());

    const makeMove = (move) => {
        // this prevents invalid moves, since they would return null
        if(game.move(move)) {
            setFen(game.fen());
        }    
    }

    const onDrop = (startSquare, endSquare) => {
        makeMove({
            from: startSquare,
            to: endSquare,
        });
    }


  return <Chessboard position={fen} onPieceDrop={onDrop} />;

}