Vite throws 'Uncaught ReferenceError: regeneratorRuntime is not defined'

[dd-jonas]

Describe the bug
Uncaught ReferenceError: regeneratorRuntime is not defined when using react-location with Vite.

To Reproduce
Steps to reproduce the behavior:

1. yarn create vite --template react-ts
2. yarn
3. yarn add @tanstack/react-location
4. Replace App.tsx with code below
5. yarn dev

import { ReactLocation, Router } from '@tanstack/react-location';

const location = new ReactLocation();

function App() {
  return (
    <Router location={location} routes={[{ path: '/' }]}>
      <h1>Title</h1>
    </Router>
  );
}

export default App;

Screenshots

Desktop (please complete the following information):

• OS: Windows 10 64-bits
• Browser: Chrome
• Version: 98.0.4758.102

[danielbayerlein]

See #220. Should be fixed with #223.

[ruisaraiva19]

This still happens with version 3.6.5 which has #223.

Dependencies

• Vite: 2.8.6
• @tanstack/react-location: 3.6.5

Only works when using version react-location <= 3.3.4

[danielbayerlein]

The problem still exists with version 3.7.0.

[hugooliveirad]

Issues are not related. To fix this one you will have to use the regenerator-runtime library and call it from your main file.

See this discussion on a similar issue with amplify-js aws-amplify/amplify-js#8514 (comment)

Here, I solved it by installing regenerator-runtime (yarn add regenerator-runtime) and adding import 'regenerator-runtime' to the top-level JavaScript file in my application (main.tsx in my case).

[ruisaraiva19]

@HugoBDev that's for the suggestion. Importing regenerator-runtime fixes the issue.

Maybe this is something that can be added to the docs.

[dd-jonas]

I have tried out react-location a while back with vite and didn't encounter this issue. What changes that made importing regenerator-runtime necessary now?

[bhbs]

This issue was fixed with #236
Try the latest version 👍 v3.7.2

[reintroducing]

Still happening for me in v3.7.4.

EDIT: Sorry, got my tanstack modules mixed up, thats actually calling react-table useAsyncDebounce.

[unional]

Still happening in vite 4.0.2

[elmapaul]

Still happening in vite 4.3.9

[fruitbang]

It is still there! vite 4.4.0

[datnguyennnx]

Try this way:
pnpm install vite-plugin-babel @vitejs/plugin-legacy

Then copy this code to vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import legacy from '@vitejs/plugin-legacy'
import babel from 'vite-plugin-babel'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(), 
    legacy({
      targets: ['defaults', 'not IE 11'],
      additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
    }),
    babel({
      babelConfig: {
          babelrc: false,
          configFile: false,
          plugins: ['@babel/plugin-transform-runtime'],
      }
  })
  ],
})

[vishal4kingsbridge]

When using React Table, if your code uses async/await syntax, you need to introduce the regenerator-runtime library into the project.

1. You can install the regenerator-runtime library via npm and then include it in your code:
   npm install --save regenerator-runtime

2. Introduce it in your entry file, such as index.js or main.js
   import 'regenerator-runtime/runtime'