在Next.js中使用react-speech-recognition模块遇ReferenceError错误求助

我在Next.js项目中使用react-speech-recognition实现语音识别，严格按照文档编写代码后出现以下错误：

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)

我的代码如下：

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

问题原因 #

该错误是因为react-speech-recognition内部使用了Generator函数，而Next.js默认Babel配置未包含对Generator的转译逻辑，导致运行环境无法找到regeneratorRuntime。

解决方法 #

方法1：配置Babel转译Generator函数 #

1. 安装依赖：

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

2. 在项目根目录创建.babelrc文件，添加以下配置：

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

方法2：转译第三方依赖包 #

1. 安装转译工具：

npm install --save-dev next-transpile-modules

2. 在next.config.js中添加配置：

const withTM = require('next-transpile-modules')(['react-speech-recognition']);

module.exports = withTM({
  // 你的其他Next.js配置项
});

方法3：降级依赖版本 #

如果上述方法无效，可尝试降级到不依赖Generator的旧版本：

npm install react-speech-recognition@3.9.0

额外注意 #

• 语音识别仅支持HTTPS环境或localhost，部署时需确保站点使用HTTPS协议；
• 确认Next.js版本与依赖包版本兼容。

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