`regeneratorRuntime is not defined` error in react-speech-recognition even afer running `npm i --save regenerator-runtime`

Question

I'm using Vite for running my react application and want to use react-speech-recognition module but I'm getting the error regeneratorRuntime is not defined.

Even after running the command npm i --save regenerator-runtime, the error persists (BTW I'm using chrome). It seems that the error is occurring in the /node_modules/.vite/deps/react-speech-recognition.js file but I don't know how to fix it, any suggestions?

BTW, yes my code is correct, but the application isn't loading due to the error

edit: here's my code

const HearingCall = () => {...

   useEffect(() => {
    const {
      transcript,
      listening,
      resetTranscript,
      browserSupportsSpeechRecognition
    } = useSpeechRecognition();  /*comment:  here is where im getting the error*/

    if (!browserSupportsSpeechRecognition) {
        console.log("browser doesnt support speech to text recognition")
    }
    else{
      SpeechRecognition.startListening
      console.log(transcript)
    }
    
  
    return () => {
    
      if (listening){
        SpeechRecognition.stopListening()
      }
    }
  },[openDialog])
...
}

Answer 1

install core-js using

npm install --save core-js

add this line at the top of the component or top of the root file

import 'regenerator-runtime/runtime';

for me it worked in the component file and make sure that it's imported at the very top on first line... i was importing it on 4th line and it wasn't working.. wasted my whole on it. and i just put it on 1st line and it worked