Error: "regeneratorRuntime is not defined" with Import Wrappers

[Al-Rozhkov]

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>

[maoberlehner]

Can you try to use relative imports instead of ~? Eg. import('../components/blocks/FrontHero.vue')

If this still doesn't work a reproduction CodeSandbox would be great! Thx!

[Al-Rozhkov]

Nope, still no luck with relative imports.

I need more time to strip out unrelated stuff and provide CodeSandbox.

[maoberlehner]

Maybe you can try to do a regular dynamic import FrontHero: () => import('~/components/blocks/FrontHero.vue') if that doesn't work either, the Babel config in use is nut suited for handling dynamic imports.

[Al-Rozhkov]

Here is CodeSandbox: https://codesandbox.io/s/gridsomelazyhydration-3deeh

I'm really bad at Babel and Webpack yet. Any clue would be much appreciated.

[maoberlehner]

Thanks for the CodeSandbox link. Unfortunately it does not work for me. Have you already tried using a dynamic import without this package: FrontHero: () => import('~/components/blocks/FrontHero.vue') Does this work?

[Al-Rozhkov]

Yes, regular async component injection works:

components: {
    AnotherStaticBlock: () => import('~/components/AnotherStaticBlock.vue')
  }

Import Wrapper doesn't.

I also have public repo for this example. It would be great if you could look at it. Thank you!

[LuXDAmore]

I have the same problem, with Nuxt@2.7.1 and Vue@2.6.10

[maoberlehner]

@LuXDAmore please provide a reproduction link. I just tested it: fresh install with latest version of create-nuxt-app and latest version of vue-lazy-hydration does work.

[maoberlehner]

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.

[LuXDAmore]

Thank You @maoberlehner ,

I have this configuration in my project. DOCS

Hope this helps. 😄

[mercs600]

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