regeneratorRuntime is not defined NextJS

[KevinDanikowski]

Issue

Build fails in nextjs due to regernatorRuntime is not defined from RecognitionManger.js. This is because the babel config which bundles the package isn't conducive to eliminating regernatorRuntime which doesn't work in server side rendering (SSR , which is what NextJS package specializes in).

Hacky Solution

I don't know the solution, but my hacky solution was to copy the code from src into my repo and let the nextJS babel config 'next/babel' do the compilation without error. I tried https://github.com/babel/babel/issues/8829#issuecomment-456524916 but it did not solve the problem.

[JamesBrill]

Hi @KevinDanikowski Thanks for raising this issue. A few other NextJS users have reported this as well. One solution that worked for them was to install regenerator-runtime in their app and then import it with import 'regenerator-runtime/runtime'.

If this doesn't work, I will spin up a NextJS app myself to see if I can find a more robust solution that I can add to the README. Or, even better, if you share your project, I can fork it and see the problem for myself.

[KevinDanikowski]

@JamesBrill thanks for the message. Here are steps to reproduce, it's actually quite simple because it's impossible to build:

1. npx create-next-app (https://nextjs.org/docs)

2. npm install react-speech-recognition

3. in index.js import your module import Speech from 'react-speech-recognition'

4. run npm run build

Here is the sample repo for this project https://github.com/KevinDanikowski/dummy-nextjs-speech-recognition-project

Just run npm run build and it'll fail with the runtime error

[JamesBrill]

Thanks for taking the time to prepare that example repo. I was able to reproduce the issue according to your instructions.

The solution that worked for me was to follow what others have done:

• npm i --save regenerator-runtime
• Import the Regenerator Runtime at the top of your JS index. i.e. put import 'regenerator-runtime/runtime' at the top of this file

I also tried installing the Babel runtime and transform plugin, plus the following .babelrc file:

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

No change in result with that approach - not entirely sure why as I believe NextJS honours the root Babel config.

Anyway, I hope the manual import solution above is sufficient for you. I'm debating whether to add the Babel runtime as a peer dependency for this library - still researching the consequences of that.

[KevinDanikowski]

Thanks @JamesBrill that's a great solution as well! by importing the project directly into my app maybe nextjs did something with the regenerator run time directly, not sure.

[ilhamwahabi]

Hi, I think import 'regenerator-runtime/runtime' didn't work anymore

Edit: In my case now it works if it imported in _app.js instead of index.js