Getting error while trying to use react speech recognition module in nextjs

Question

I am trying to implement speech recognition into my next.js website. I downloaded and am trying to use the same code from this link, but I get this error:

ReferenceError: regeneratorRuntime is not defined
    at C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-speech-recognition\lib\RecognitionManager.js:247:61
    at C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-speech-recognition\lib\RecognitionManager.js:332:6
    at Object.<anonymous> (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-speech-recognition\lib\RecognitionManager.js:452:2)
    at Module._compile (internal/modules/cjs/loader.js:1085:14)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (internal/modules/cjs/helpers.js:92:18)
    at Object.<anonymous> (C:\Users\simer\Downloads\Talkhappi\client\node_modules\react-speech-recognition\lib\SpeechRecognition.js:16:50)

I'm not sure why this is happening because I followed the instructions of the npm download website I linked above. Here is my code:

import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

const Product = () => {
  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition
  } = useSpeechRecognition();

  // Handle browser support error
  if (!browserSupportsSpeechRecognition) {
    return <span>Browser doesn't support speech recognition.</span>;
  }

  return (
      <div style={styles.container}>
          <div style={styles.speechTitle}>Talk to us, tell us about your day...</div>
          <div style={styles.speechBox}>

          </div>
          <button onClick={() => console.log('hello')}>Hello</button>
          <p>Microphone: {listening ? 'on' : 'off'}</p>
          <button onClick={SpeechRecognition.startListening}>Start</button>
          <button onClick={SpeechRecognition.stopListening}>Stop</button>
          <button onClick={resetTranscript}>Reset</button>
          <p>{transcript}</p>
      </div>

  );
}

export default Product

Answer 1

It's at the bottom of the docs - under Troubleshooting. https://www.npmjs.com/package/react-speech-recognition

regeneratorRuntime is not defined

If you see the error regeneratorRuntime is not defined when using this library, you will need to ensure your web app installs regenerator-runtime:

• npm i --save regenerator-runtime

• If you are using NextJS, put this at the top of your _app.js file: import 'regenerator-runtime/runtime'. For any other framework, put it at the top of your index.js file

Answer 2

Next Js 15

• You have to install the npm install --save -D regenerator-runtime and npm install --save react-speech-recognition
• You have to import the runtime into the file where you are adding speech recognition functionality. import "regenerator-runtime/runtime";
• Example in code:

"use client";
import React, { useState, useEffect } from "react";
import "regenerator-runtime/runtime";
import SpeechRecognition, {
  useSpeechRecognition,
} from "react-speech-recognition";
export const HomeComponent = () => {
  const [browserSupport, setBrowserSupport] = useState<Boolean>(true);

  const {
    transcript,
    listening,
    resetTranscript,
    browserSupportsSpeechRecognition,
  } = useSpeechRecognition();

  useEffect(() => {
    if (!browserSupportsSpeechRecognition) {
      setBrowserSupport(false);
      console.log("its not supported")
    }
    else{
      console.log("its supported")
    }

  },[])


  return (
    <div>
      {browserSupport ? (
        <>
          <p>Microphone: {listening ? "on" : "off"}</p>
          <button onClick={()=>SpeechRecognition.startListening({continuous:true, language:"es-Es"})}>Start</button>
          <button onClick={SpeechRecognition.stopListening}>Stop</button>
          <button onClick={resetTranscript}>Reset</button>
          <p className="text-black">Texto: {transcript}</p>
        </>
      ) : (
        <p>Speech recognition is not supported by this browser</p>
      )}
    </div>
  );
};