maoberlehner
commented
5 years ago Hey @mauxtin! Could you post a reproduction link via CodeSandbox? Thx!
Closed mauxtin closed 4 years ago
maoberlehner
commented
5 years ago Hey @mauxtin! Could you post a reproduction link via CodeSandbox? Thx!
rcpires
commented
5 years ago Same error to me (just error 1) on chrome Version 74.0.3729.157 (Official Build) (64-bit). Example (just code, not codesandbox):
<template>
<div class="homepage">
<section-welcome section-name="welcome"/>
<LazyHydrate v-slot="{ hydrated }" when-visible>
<section-themes-carousel v-if="hydrated"
section-name="themes"
:show-link-to-all-features="true"
:hasThemeFinalSlide="true"
>
<template slot="header">
<header>
<h2 class="title is-2">
Deixe
<span class="has-text-primary">seu site</span> com sua cara
<br>São mais de
<span class="has-text-primary">30 modelos para você personalizar</span>
</h2>
</header>
</template>
</section-themes-carousel>
</LazyHydrate>
<LazyHydrate v-slot="{ hydrated }" when-visible>
<section-gifts-intro v-if="hydrated" section-name="presentes-introducao">
<template slot="header">
<header style="margin-bottom: 2em" v-animate="'fadeInUp'" class="animated">
<h2 class="title is-2">
E o melhor:
<br>Sua
<span class="has-text-primary">lista de presentes</span> é
<span class="has-text-primary">convertida em dinheiro</span>,
<br class="is-hidden-mobile">para você
<span class="has-text-primary">gastar como quiser</span>
</h2>
</header>
</template>
<template slot="footer">
<footer v-animate="'fadeInUp'" class="animated section-gifts-intro-footer">
<p class="hero-body p-top-0">
Tudo isso com a
<strong class="has-text-primary">melhor taxa do mercado</strong> e em até
<strong class="has-text-primary">3 dias o dinheiro</strong> estará em
<strong class="has-text-primary">sua conta PayPal</strong>
</p>
<a
href="/lista-de-casamento"
class="button is-primary is-medium"
>Vantagens da lista de casamento</a>
</footer>
</template>
</section-gifts-intro>
</LazyHydrate>
</div>
</template>
<script>
import LazyHydrate from "vue-lazy-hydration";
export default {
// other props hidden,
components: {
LazyHydrate,
SectionWelcome: () => import("~/components/home/SectionWelcome.vue"),
SectionThemesCarousel: () => import("~/components/SectionThemesCarousel.vue"),
SectionGiftsIntro: () => import("~/components/home/SectionGiftsIntro.vue"),
}
};
</script>Would be great to know more about your setup, especially how you do SSR: Nuxt.js, Gridsome, custom webpack config (but reproduction links are much preferred if you want to get help fast!)? Thx!
maoberlehner
commented
5 years ago Generally speaking, I know there can be problems in certain circumstances with using v-if="hydrated" in new versions of Vue.js (I'm working on it).
But reproduction links would be very helpful!
maoberlehner
commented
5 years ago Additional info: it seems to have to do with the changes regarding scoped slots in Vue.js 2.6.0+
I'm working on it. For now you can simply remove v-slot and v-if="hydrated".
maxxcs
commented
4 years ago I had the same issue when I used with <component :is="someComponent" />
Example:
<LazyHydrate v-slot="{ hydrated }" on-interaction>
<component :is="someComponent" v-if="hydrated" />
</LazyHydrate>
mfrascati
commented
4 years ago I had the same issue, but the issue happened lazy loading a component having a v-if.
In my case I had the error on route leave, because in the beforeRouteLeave I was cleaning the object, making the v-if false, so on LazyHydrate self cleaning the object was not present. Easily fixed by wrapping my component in a div.
Maybe this solution can be helpful for somebody else!
Recently got two error messages on sentry. Both are from an Android 4.4.4 device on a Chrome browser (Chrome 73.0.3683)
Not sure if I can help in any way or if they are related (let me know if it's better to create a separate issue for the second one). 1)
2)