0

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

Leotheperegrine
  • 1
  • 2

1 Answers1

0

since you are using metadata, you are working on nextjs13 app directory. so you should import it in RootLayout component

import 'regenerator-runtime/runtime'
Yilmaz
  • 35,338
  • 10
  • 157
  • 202