react-speech-recognition包运行报错：regeneratorRuntime is not defined

问题 #

使用react-speech-recognition（一款能将用户音频转换为文本的React工具包）时，运行基础示例代码触发报错：

"RecognitionManager.js:247 Uncaught ReferenceError: regeneratorRuntime is not defined"

示例代码：

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

const App = () => {
    const {transcript, listening,resetTranscript, browserSupportsSpeechRecognition } = useSpeechRecognition();
    if (!browserSupportsSpeechRecognition) {
        return <span>Browser doesn't support speech recognition.</span>;
      }
    //   const startListening = () => SpeechRecognition.startListening({ continuous: true, language: 'en-IN' });
    return (
        <>
       <div>
      <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 App;

错误栈信息：

RecognitionManager.js:247 Uncaught ReferenceError: regeneratorRuntime is not defined
at RecognitionManager.js:247:61
at RecognitionManager.js:332:5
at node_modules/react-speech-recognition/lib/RecognitionManager.js (RecognitionManager.js:452:1)
at __require (chunk-76J2PTFD.js?v=a062c6e0:3:50)
at node_modules/react-speech-recognition/lib/SpeechRecognition.js (SpeechRecognition.js:16:50)
at __require (chunk-76J2PTFD.js?v=a062c6e0:3:50)
at node_modules/react-speech-recognition/lib/index.js (index.js:16:50)
at __require (chunk-76J2PTFD.js?v=a062c6e0:3:50)
at index.js:23:22

解决方案 #

这个错误是因为react-speech-recognition内部用到了async/await这类异步语法，但你的项目没有配置对应的Babel支持，导致浏览器无法识别regeneratorRuntime。按以下步骤修复：

方案1：手动配置Babel的项目 #

1. 安装依赖

npm install @babel/plugin-transform-runtime @babel/runtime --save-dev

2. 修改Babel配置文件（比如.babelrc或babel.config.json），添加插件配置：

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "regenerator": true
    }]
  ]
}

方案2：Create React App创建的项目 #

不需要手动改Babel配置，直接安装regenerator-runtime：

npm install regenerator-runtime --save

然后在项目入口文件（比如src/index.js）顶部添加引入：

import 'regenerator-runtime/runtime';

执行完上面的步骤后，重新运行项目就能解决这个报错。

内容的提问来源于stack exchange，提问作者Aakash Saini