I am building a Gutenberg block where the user will place the PGN code (chess game notation) inside the RichText field. On the frontend, the game’s code will be embedded inside a chessboard library and display the game with the notation and moves. When I paste the PGN inside the RichText field, I get an error in my console saying I have the error Error: Minified React error #321 (invalid hook call error).

I am using @mliebelt/pgn-viewer for the chessboard.

Here is my code:

edit.js

import { __ } from '@wordpress/i18n';

import { useBlockProps, RichText } from '@wordpress/block-editor';

import './editor.scss';
export default function Edit({attributes, setAttributes}) {
const blockProps = useBlockProps();

const handleChange = (val) => {
    console.log('New value:', val);
    setAttributes({ pgnCode: val });
};

    return (
        <>
        <RichText
        {...blockProps}
        className="pgn-textarea"
        tagName="p"
        placeholder={__("Enter PGN code here...", "wcbp")}
        value={attributes.pgnCode}
        onChange={handleChange}
        allowedFormats={[]}
        />
        </>
    );
}

save.js

import { useBlockProps } from '@wordpress/block-editor';

import { useEffect, useState } from 'react';
import { pgnView } from '@mliebelt/pgn-viewer';
import PGNViewer from './PGNViewer';

export default function save({ attributes }) {
    const blockProps = useBlockProps.save();

        
    return (
        <div {...blockProps}>
        <PGNViewer attributes={attributes} />
    </div>
    );
}

PGNViewer.js

import { useEffect } from 'react';
import { pgnView } from '@mliebelt/pgn-viewer';

function PGNViewer({ attributes }) {
    if (!attributes || !attributes.pgnCode) {
        return null; // Or render a placeholder
    }

    const newBoardId = `board-${Math.floor(Math.random() * 100000)}`;

    useEffect(() => {
        pgnView(newBoardId, {
            pgn: attributes.pgnCode,
            notation: 'long',
            layout: 'left',
            locale: 'pl',
            startPlay: 1,
            showResult: true,
            boardSize: '500',
            showFen: false,
            pieceStyle: 'merida'
        });
    }, [attributes.pgnCode]);

    return <div id={newBoardId}></div>;
}

export default PGNViewer;