尝试在nextjs中使用React语音识别模块时出现错误

Question

我正在尝试在我的 next.js 网站中实现语音识别。我下载并尝试使用 this 链接中的相同代码，但出现此错误：

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)

我不确定为什么会发生这种情况，因为我按照上面链接的 npm 下载网站的说明进行操作。这是我的代码：

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

它位于文档底部 - 故障排除下方。 https://www.npmjs.com/package/react-speech-recognition

regeneratorRuntime is not defined

如果您看到错误

regeneratorRuntime is not defined

使用这个库时，你会 需要确保您的网络应用程序已安装

regenerator-runtime

:

• npm i --save regenerator-runtime

• 如果您使用 NextJS，请将其放在

  _app.js

  文件的顶部：

  import 'regenerator-runtime/runtime'

  。对于任何其他框架，输入 它位于您的

  index.js file

  的顶部

Answer 2

可以通过导入 SpeechRecognition 的文件顶部的 import 'regenerator-runtime' 来修复