Cannot read property 'resolved' of undefined when removing <LazyHydrate>

[simplenotezy]

I am debugging some issues with LazyHydrate and I stumpled upon something I really can't explain.

I have a piece of code like so:

<LazyHydrate :trigger-hydration="hydrateProductList">
    <div class="container">
        <template v-for="(chunk, chunkIndex) in chunkedProducts">
            <div
                v-if="!(chunkIndex % chunksPerFetch)"
                :key="'page-break-' + chunkIndex+chunkedProducts.length"
                :data-page="determinePageFromChunk(chunkIndex)"
                v-observe-visibility="{ callback: (isVisible, entry) => { pageBreakVisible(isVisible, entry, chunkIndex) } }"
                class="page-break" />
            <div :key="chunkIndex" :class="{ ['chunk-' + chunk.length] : true, ['is-mobile'] : isGridView, ['is-latest'] : (chunkIndex >= (chunkedProductsWithoutSkeleton.length - chunksPerFetch)) }" class="columns">
                <template v-for="(product, index) in chunk">
                    <div v-observe-visibility="{ callback: firstSkeletonVisible, intersection: { rootMargin: '200px', threshold: 0 } }" :key="'skeleton'+index+chunk" v-if="product.isSkeleton && (hasMoreResults || autoLoadPrev && scrolledPage > 1)" class="skeleton-detector" />
                    <ProductDisplay
                        v-if="product.title || product.isSkeleton"
                        :key="chunkIndex+index"
                        :product="product"
                        :hydrate="page > 1 || ((searchQuery) ? true : false)"
                        @productClicked="saveLastClickedProduct(product, determinePageFromChunk(chunkIndex))"
                        :showLabels="true"
                        :trackingList="'ProductList ' + getListHeader" />
                    <QouteDisplay v-if="product.qoute" :material="materials[0] || false" :key="chunkIndex+index" />
                </template>
            </div>
        </template>
    </div>
</LazyHydrate>

And I wish to remove the "LazyHydrate" components wrapping the whole section. The code works when the <LazyHydrate> component is present, however, when I remove them, I get the following error:

client.js?06a0:97 TypeError: Cannot read property 'resolved' of undefined
    at patchVnode (vue.runtime.esm.js?2b0e:6284)
    at updateChildren (vue.runtime.esm.js?2b0e:6193)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)
    at updateChildren (vue.runtime.esm.js?2b0e:6193)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)
    at updateChildren (vue.runtime.esm.js?2b0e:6193)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)
    at updateChildren (vue.runtime.esm.js?2b0e:6193)
    at patchVnode (vue.runtime.esm.js?2b0e:6319)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6482)

Any suggestions?

[j0Shi82]

Without more code I think it's hard to debug. One generic fix I can think of is not lazy-loading the involved components.

Check for

components: {
   ProductDisplay: () => import(/**/),
   QouteDisplay: () => import(/**/),
}

and change it to

import ProductDisplay from 'src/components/whatever';
import QouteDisplay from 'src/components/whatever';

components: {
   ProductDisplay,
   QouteDisplay
}

Because the error could indicate that Vue is trying to render something that is not yet (lazy-)loaded. But the error is fairly generic. So this is just a vague guess.

[simplenotezy]

Interesting @j0Shi82 I think you could be right. Let me check that.

[simplenotezy]

That seemed to do the trick, @j0Shi82