How to implement Google Text-to-Speech in reactjs

Question

I believe I have completed all the necessary steps for it to work, and yet it still doesn't work. I created the project, created the service, generated the key, authorized the Text-to-Speech API, and still it returns an error.

import React, { useState } from 'react';
import { TextToSpeechClient } from '@google-cloud/text-to-speech';
import apiKeys from "../apiKeys.json"

const GoogleTextToSpeech = () => {
  const [text, setText] = useState('');
  const [audioUrl, setAudioUrl] = useState('');

  const handleClick = async () => {
    try {
      const client = new TextToSpeechClient({credentials: apiKeys});
      const [response] = await client.synthesizeSpeech({
        input: { text },
        voice: { languageCode: 'pt-BR', ssmlGender: 'NEUTRAL' },
        audioConfig: { audioEncoding: 'MP3' },
      });
      const audioContent = response.audioContent;
      const audioBlob = new Blob([audioContent], { type: 'audio/mp3' });
      const audioUrl = URL.createObjectURL(audioBlob);
      setAudioUrl(audioUrl);
    } catch (error) {
      console.error('Error synthesizing speech:', error);
    }
  };

  return (
    <div>
      <textarea value={text} onChange={(e) => setText(e.target.value)} />
      <button onClick={handleClick}>Synthesize Speech</button>
      {audioUrl && <audio controls src={audioUrl} />}
    </div>
  );
};

export default GoogleTextToSpeech;

And these errors occur.

Error 1:

Error synthesizing speech: TypeError: Class extends value undefined is not a constructor or null
at node_modules/agent-base/dist/index.js (@google-cloud_text-to-speech.js?v=a30ffa1a:10988:36)
at __require2 (chunk-BQWMX7FD.js?v=a30ffa1a:15:50)
at node_modules/https-proxy-agent/dist/index.js (@google-cloud_text-to-speech.js?v=a30ffa1a:11193:24)
at __require2 (chunk-BQWMX7FD.js?v=a30ffa1a:15:50)
at node_modules/gaxios/build/src/gaxios.js (@google-cloud_text-to-speech.js?v=a30ffa1a:11317:31)
at __require2 (chunk-BQWMX7FD.js?v=a30ffa1a:15:50)
at node_modules/gaxios/build/src/index.js (@google-cloud_text-to-speech.js?v=a30ffa1a:11617:20)
at __require2 (chunk-BQWMX7FD.js?v=a30ffa1a:15:50)
at node_modules/gcp-metadata/build/src/index.js (@google-cloud_text-to-speech.js?v=a30ffa1a:13618:20)
at __require2 (chunk-BQWMX7FD.js?v=a30ffa1a:15:50)

Error 2:

GoogleTextToSpeech.j…?t=1710505067471:38 Error synthesizing speech:
TypeError: Cannot read properties of undefined (reading 'GrpcClient')
at new TextToSpeechClient (@google-cloud_text-t…v=a30ffa1a:39151:45)
at handleClick (GoogleTextToSpeech.j…1710505067471:27:22)
at HTMLUnknownElement.callCallback2 (react-dom_client.js?v=a30ffa1a:3674:22)
at Object.invokeGuardedCallbackDev (react-dom_client.js?v=a30ffa1a:3699:24)
at invokeGuardedCallback (react-dom_client.js?v=a30ffa1a:3733:39)
at invokeGuardedCallbackAndCatchFirstError (react-dom_client.js?v=a30ffa1a:3736:33)
at executeDispatch (react-dom_client.js?v=a30ffa1a:7016:11)
at processDispatchQueueItemsInOrder (react-dom_client.js?v=a30ffa1a:7036:15)
at processDispatchQueue (react-dom_client.js?v=a30ffa1a:7045:13)
at dispatchEventsForPlugins (react-dom_client.js?v=a30ffa1a:7053:11)
handleClick @ GoogleTextToSpeech.j…?t=1710505067471:38

error 1

error 2