I'm getting the errorReferenceError: regeneratorRuntime is not defined in nextJS13
I am using Redux toolkit.
Link to my project. Note: the code where I get the error is under the nextjsfrontend branch.
I'm a beginner at web dev, and especially nextjs, so please don't be too harsh.
My SpeechRecognitionComponent file which is triggering the error:
import React from 'react'
import SpeechRecognition, {useSpeechRecognition} from "react-speech-recognition"
function SpeechRecognitionComponent() {
const {
transcript,
interimTranscript,
finalTranscript,
resetTranscript,
listening,
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>Browser doesn't support speech recognition.</span>;
}
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 SpeechRecognitionComponent
My layout.js file:
import './globals.css'
import { Providers } from "@/redux/provider";
export const metadata = {
title: 'Leo GPT',
description: 'An AI that immitates me',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<Providers>
<header>
<h2>Leo GPT</h2>
</header>
{children}
</Providers>
</body>
</html>
)
}
My _app.js file:
import 'regenerator-runtime/runtime'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
According to the docs, if you get this error, you need to do npm install regenerator-runtime and than import it in _app.js, but I did that:
import 'regenerator-runtime/runtime'
export default function MyApp({ Component, pageProps }) {
return <Component {...pageProps} />;
}
I still get the error.
Has anyone else experienced this issue? If so, any help would be extremely helpful
since you are using
metadata, you are working onnextjs13 appdirectory. so you should import it inRootLayoutcomponent