Alan AI Error Uncaught Error: The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time

Question

I am developing an E-commerce website AI powered Voice Command Using Alan AI. But Whenever I come back from another route, there's a blank page appears.and this error message shows in the console: "Uncaught Error: The Alan Button instance has already been created. There cannot be two Alan Button instances created at the same time". What can I do? my code is given below:

const Alan = () => {

    useEffect(() => {
        alanBtn({
            key: alanKey,
            onCommand: ({ command }) => {
                if (command === 'testCommand') {
                    alert('This code was executed');
                }
            }
        })
    }, [])

    return (
        <div>

        </div>
    );
};

Answer 1

It's critical but easy...!

Use requestAnimationFrame for your webpage visual changes.

If run as a requestAnimationFrame callback, this will be run at the start of the frame.

const Alan = () => {
  useLayoutEffect(() => {
    function updateScreen(time) {
      // Make visual updates here.
      alanBtn({
        key: alanKey,
        onCommand: ({ command }) => {
          if (command === 'testCommand') {
            alert('This code was executed');
          }
        }
      })
    }

    requestAnimationFrame(updateScreen);
  }, [])

  return (
    <div>

    </div>
  );
};