尝试在 nextjs 中使用 React 语音识别模块时出错
2022-09-08
4066
我正在尝试将语音识别实现到我的 next.js 网站中。我从 此 链接下载并尝试使用相同的代码,但出现此错误:
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
2个回答
它位于文档底部 - 故障排除下。 https://www.npmjs.com/package/react-speech-recognition
regeneratorRuntime is not defined
If you see the error
regeneratorRuntime is not defined
when using this library, you will need to ensure your web app installsregenerator-runtime
:
npm i --save regenerator-runtime
If you are using NextJS, put this at the top of your
_app.js
file:import 'regenerator-runtime/runtime'
. For any other framework, put it at the top of yourindex.js file
limco
2022-09-08
在此处输入图片描述 可以通过在导入 SpeechRecognition 的文件顶部导入“regenerator-runtime”来修复
Nalaka Sampath
2024-03-07