Vite+React项目用react-speech-recognition遇regeneratorRuntime未定义错误

出现这个错误是因为react-speech-recognition内部用到了Generator函数，而Vite默认的构建配置没有处理这类语法，即便安装了regenerator-runtime也没生效，试试下面的解决方案：

方案1：全局引入regenerator-runtime #

在项目入口文件（比如src/main.jsx）的最顶部添加一行引入：

import 'regenerator-runtime/runtime'

这样能确保regeneratorRuntime在全局环境中被注册，覆盖依赖包中的调用需求。

方案2：配置Vite强制转译依赖并升级语法目标 #

Vite默认不会转译node_modules里的包，需要在vite.config.js中添加配置，让react-speech-recognition被正确转译，同时提升语法兼容目标：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['react-speech-recognition'],
    esbuildOptions: {
      target: 'es2020' // 支持Generator函数的语法版本
    }
  },
  build: {
    target: 'es2020'
  }
})

修改完配置后，重启Vite开发服务即可。

额外提示 #

你代码里的SpeechRecognition.startListening少了调用括号，应该写成SpeechRecognition.startListening()，不然不会触发监听逻辑。

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