Hot reload fails when using Import wrappers

[paulnta]

I have a Nuxt project and I'm trying to understand why import wrappers such as hydrateWhenVisible don't work well with hot reload. When I edit a lazy hydrated component, some errors are triggered and the component seems to lose its props.

Steps to reproduce:
You can use this codesandbox: https://codesandbox.io/s/vue-lazy-hydration-hot-reload-issue-vfrpm

• No problem when editing pages/index.vue
• But editing HelloWorld.vue will trigger the following errors (you may have to edit the template a few times before it fails)

  Cannot read property 'message' of undefined
  Failed to execute 'unobserve' on 'IntersectionObserver'
  

pages/index.vue

<template>
    <HelloWorld :content="{ message: 'hello world' }" />
</template>

<script>
import { hydrateWhenVisible } from "vue-lazy-hydration";

export default {
  components: {
    HelloWorld: hydrateWhenVisible(() => import("~/components/HelloWorld")),
  },
};
</script>

components/HelloWorld.vue

<template>
  <div>
    <h1>{{ content.message }}</h1>
    <!-- Editing this template will fail on hot reload: `content` is undefined -->
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {
    content: Object,
  },
};
</script>

Thanks in advance 🙏

[paulnta]

One additional info is that this issue happens only with v2

[paulnta]

I looked more into this issue and it seems related to the way the HoC render function (makeHydrationBlocker) is implemented: attrs: this.$attrs doesn't forward props correctly during hot reload.

vue-lazy-hydration/src/utils/hydration-blocker.js

Lines 84 to 89 in fc76681

	render(h) {
	return h(this.Nonce, {
	attrs: this.$attrs,
	on: this.$listeners,
	scopedSlots: this.$scopedSlots,
	}, this.$slots.default);

I could reproduce the same problem by creating a minimal HoC that just wraps a component and forward all props. During hot-reload the component being wrapped loses all its props.

function WithLogger(Component) {
  return {
    render(h) {
      console.log('render', Component.name)
      return h(Component, {
        attrs: this.$attrs,
      });
    },
  };
}

Check this sandbox: https://codesandbox.io/s/vue-hot-reload-issue-with-hoc-2q1u6?file=/pages/index.vue

However, passing a copy of $attrs fixes the problem. If someone can explain why 🤷‍♂️ ?

h(Component, {
  attrs: Object.assing({}, this.$attrs)
})

I tested this fix in vue-lazy-hydration and It works too 👌 .

[regenrek]

Hi @paulnta what error message did you get when this happened? I think I'm having the same issue. Will try your possible fix.

Regards

[paulnta]

@regenrek the error happen because the component props are lost sometimes after hot reload. So you may have an error like Cannot read property '<name of a property>' of undefined. That's what I got first.

And this error triggered the next one Failed to execute 'unobserve' on 'IntersectionObserver'. This happens because the component fails to render and Vue turns it into a <!-- --> comment which is something vue-lazy-hydration doesn't expect.

Yes please, tell me if you have the same problem and if the fix works.

[paulnta]

In the current version we are using vue-lazy-hydration@1.0.0-beta.14, import wrappers don't work with Nuxt fetch hook. So we would like to upgrade, but the current version has this issue which is not an ideal DX.

While waiting for a fix, I'll probably switch to <LazyHydrate when-visible>....</LazyHydrate>. However, I noticed some important performance differences. With import wrappers, the component's bundle is also lazily evaluated. This has a positive impact on TBT.

@maoberlehner I know you are busy (based on your GH status 😄 ), but it would be amazing if you could have a look at the PR.