question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Error: "regeneratorRuntime is not defined" with Import Wrappers

See original GitHub issue

First 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:closed
  • Created 4 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
maoberlehnercommented, May 24, 2019

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.

0reactions
mercs600commented, Sep 4, 2019

@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.

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found