Error: "regeneratorRuntime is not defined" with Import Wrappers
See original GitHub issueFirst of all thank you for this project! Feels like must have for every vue based SSG. 👍
I tried vue-lazy-hydration with Gridsome. There is pretty large block of “static” markup without reactive data. Looks like perfect case for ssr-only
property. It works perfectly with <LazyHydrate ssr-only>
component, but when I tried Import Wrappers I got an error:
ReferenceError: regeneratorRuntime is not defined
at resolvableComponentFactory (LazyHydrate.esm.js?8416:109)
at hydrateSsrOnly
Chrome and Firefox, Vue 2.6.10
Here is my code:
<template>
<Layout>
<main class="block">
<front-hero />
<front-news />
<catalog-block />
<front-advantages />
</main>
<section class="services-wrapper">
<div class="block">
<front-services />
</div>
</section>
</Layout>
</template>
<script>
import { hydrateSsrOnly } from 'vue-lazy-hydration'
export default {
components: {
FrontHero: hydrateSsrOnly(
() => import('~/components/blocks/FrontHero.vue')
),
FrontAdvantages: hydrateSsrOnly(
() => import('~/components/blocks/FrontAdvantages.vue')
),
FrontServices: hydrateSsrOnly(
() => import('~/components/blocks/FrontServices.vue')
),
FrontNews: hydrateSsrOnly(
() => import('~/components/blocks/FrontNews.vue')
),
CatalogBlock: hydrateSsrOnly(
() => import('~/components/blocks/CatalogBlock.vue')
)
}
}
</script>
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (5 by maintainers)
Top Results From Across the Web
How to fix regeneratorRuntime is not defined?
I have ran into a problem, the error is regeneratorRuntime is not defined while working with React and Parcel bundler.
Read more >`regeneratorRuntime` is not defined when running Jest test
I tried to supply it by doing import "babel-polyfill" in my test file, as well as providing it in the plugins section of...
Read more >Regenerator Runtime is not defined - Risan Bagja
It's super simple: import axios from "axios"; const giphyRandom = async (apiKey, { tag, rating = ...
Read more >Help! My Vue.js Tests are Breaking! - Highland Solutions
... yourself getting “ReferenceError: regeneratorRuntime is not defined” exceptions, you'll learn a simple fix for this problem as well.
Read more >How To Use Async Await in React (componentDidMount Async)
You'll learn how to: fix regeneratorRuntime is not defined; use async/await in React with Fetch; handle errors with Fetch and async/await ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
I found a solution to this. The problem has to do with Babel not including all polyfills by default. So a freshly installed Nuxt.js seems to have all necessary polyfills but Gridsome (and maybe Nuxt.js with customized Babel settings) does not.
I’ll release a new version the next couple of days.
@maoberlehner I have to reopen this issue, because I would like to know how can I use with async component factory https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State ? Like @Al-Rozhkov wrote, the regular async component injection works, but with this wrapper not.