search

maoberlehner / vue-lazy-hydration

Lazy Hydration of Server-Side Rendered Vue.js Components
MIT License
1.18k stars 52 forks source link

unknown error with `Cannot read property 'resolved' of undefined` #24

Closed bluelovers closed 4 years ago

bluelovers commented 5 years ago

https://github.com/bluelovers/test-nuxt-app/tree/test/vue-lazy-hydration

  1. yarn run dev
  2. go http://localhost:3000/_test/plugin/vue-lazy-hydration/2
  3. click link markdownit
  4. click link vue-lazy-hydration/2
  5. bug happen

video bandicam 2019-06-23 19-02-11-922.zip

maoberlehner commented 5 years ago

Thank you for taking the time to adding reproduction link and even Video 👍

I'll look into this the next couple of days!

maoberlehner commented 5 years ago

As a quick workaround you can add a key on the div:

<!-- 1.vue -->
<div key="a">
  <div>{{date}}</div>
  <div>{{text}}</div>
</div>
<!-- 2.vue -->
<div key="b">
  <div>{{date}}</div>
  <div>{{text}}</div>
</div>

But I'm working on a bugfix!

ofek-a commented 4 years ago

Having this issue as well, thanks for taking the time to work on it!

maoberlehner commented 4 years ago

After taking a closer look I think there is not much I can do about it. It has something to do with the fact that Vue.js tries to reuse vdom nodes when possible. I think using keys like in my second comment is a ok workaround. If this is something happening to you when changing routes, you can use $route.fullPath as key like it is recommended here: https://slides.com/chrisvfritz/vueconf-workshop-2018-03#/34