regeneratorRuntime is not defined when using react with vite

[emekaorji]

Hello there👋,

When using react with vite, I get this error

I tried using CRA templates and it works just fine, but when I installed this package in a react with vite project, I get a blank UI and the error in the image above "Uncaught ReferenceError: regeneratorRuntime is not defined".

Steps to Reproduce:

Scenario 1

1. Create react app using CRA command npx create-react-app app-name
2. Install the react-speech-recognition library
3. Implement library in project
4. Speech recognition works well in browser✅

Scenario 2

1. Create react app using vite npm create vite@latest and following instructions
2. Install the react-speech-recognition library
3. Implement library in project
4. Blank UI in browser with the error - "Uncaught ReferenceError: regeneratorRuntime is not defined"❌

Note: I only tested this with CRA and Vite

[Ac-Srikanth]

Having the same issue

[dlwhitehurst]

I have this working with Vite and Typescript. This is what I found.

In tsconfig.json I added esModuleInterop.

{
  "compilerOptions": {
    "typeRoots": ["./node_modules/@types"],
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "esModuleInterop": true,

I had also copied the regenerator-runtime/runtime below the react-speech-recognition import. Be sure to copy it above and you'll be taking dictation.

[khudratov]

Having the same issue

@dlwhitehurst did not worked your solution for me

update it will work if we put import above all another imports @dlwhitehurst thx man

[dlwhitehurst]

@khudratov and commit-staff here: This can be closed. You are correct. The import placement is critical.

[Shubh-Rajawat]

what should I do to solve this error in Next js, I used this in next js giving same error that "regeneratorRuntime is not defined"? The above solution is not working for us .

[Shubh-Rajawat]

what should I do to solve this error in Next js, I used this in next js giving same error that "regeneratorRuntime is not defined"? The above solution is not working for us .

well it worked I just followed this stackOverflow solution --Stack Overflow

[vu-innoflex]

For me, it worked when I configured vite.config.ts with https://www.npmjs.com/package/@vitejs/plugin-legacy Adding these lines

   plugins: [
      ...your_plugins,
      legacy({
        additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
      }),
      babel({
        babelConfig: {
          babelrc: false,
          configFile: false,
          plugins: ["@babel/plugin-transform-runtime"],
        },
      })],
    esbuild: {
      supported: {
        "top-level-await": true,
      },
    }