Page transition error with Vue3-b16: Cannot read _leaveCb property

[cliqer]

Version

4.0.0-alpha.13

Reproduction link

https://codesandbox.io/s/fancy-shadow-04mrv?file=/package.json

Steps to reproduce

You can see the error within the reproduction link while changing routes

What is expected?

Page transition to work as expected

What is actually happening?

Cannot read _leaveCb property

---

As Evan You commented here (vitejs/vite#482 (comment)) this is liekly a vue-router Vue 3 issue.
Can you please have a look?

[posva]

Transition and KeepAlive usage is still going through and RFC and will likely have a few breaking changes
Here you have a working example: https://github.com/vuejs/vue-router-next/blob/master/e2e/transitions/index.ts

[cliqer]

Thank you @posva and sorry for re-opening.
For future reference and for people like me that are not gurus like you and may bump onto this, what exactly do I need to change in my reproduction link to make it work?
I couldn't really understand what you did there.
Many Thanks

[Aferz]

@posva As you mentioned, this is going through RFC yet, but your example does work in 4.0.0-alpha.14 so... is it safe to assume this is already implemented? BC can potentially occur but more or less the syntax/concept is settled? (swapping the way transition and router-view were written in a component, for example)

[posva]

Use it if you need it but make sure to pay attention to the changelog for changes :)

[Aferz]

Nice! Thank you very much.

[cliqer]

I managed to make it work by swapping the transition with the route as per your example but couldn't figure out how to make the enter-transition work correctly. Can someone elaborate please?
https://codesandbox.io/s/fancy-shadow-04mrv?file=/src/App.vue

[Aferz]

@gianniskarmas There is no more enter class. It has been renamed to enter-from. This example fully works (Using tailwindcss).

<router-view v-slot="{ Component, props }">
    <transition
      enter-from-class="-translate-x-24 opacity-0"
      enter-active-class="transition duration-200 transform"
      enter-to-class="translate-x-0 opacity-100"
      leave-from-class="translate-x-0 opacity-100"
      leave-active-class="transition duration-200 transform"
      leave-to-class="translate-x-24 opacity-0"
    >
      <component :is="Component" v-bind="props" />
    </transition>
  </router-view>

Here is the RFC explaining the change: vuejs/rfcs#105

[cliqer]

Thank you so much @Aferz, that explains it perfectly.

[lrsoy]

2022-07-04， I also encountered this problem，Been tormented by this problem for days, finally found it here，thank you very much，i have solved it @Aferz @cliqer

[shtse8]

 Cannot read properties of null (reading '_leaveCb')

2022-08-12， I also encountered this problem too with nuxt3.

[ihorbond]

@shtse8 did you solve it ? I'm not using any transitions in my nuxt3 app.

[shtse8]

@shtse8 did you solve it ? I'm not using any transitions in my nuxt3 app.

no, it happens in dev mode and randomly crash with this error, but luckily working fine in production.
I am using Vite Node + Nuxt3, after enabling vite node, this error randomly occur.

[ihorbond]

@shtse8 did you solve it ? I'm not using any transitions in my nuxt3 app.

no, it happens in dev mode and randomly crash with this error, but luckily working fine in production. I am using Vite Node + Nuxt3, after enabling vite node, this error randomly occur.

Hmm ok, I do the same and it seems to crash after every other hot reload.