Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
cliqer opened this issue Jun 30, 2020 · 26 comments
Closed

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

cliqer opened this issue Jun 30, 2020 · 26 comments

Comments

@cliqer
Copy link

cliqer commented Jun 30, 2020

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
Copy link
Member

posva commented Jun 30, 2020

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

@posva posva closed this as completed Jun 30, 2020
@cliqer
Copy link
Author

cliqer commented Jul 1, 2020

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
Copy link

Aferz commented Jul 1, 2020

@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
Copy link
Member

posva commented Jul 1, 2020

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

@Aferz
Copy link

Aferz commented Jul 1, 2020

Nice! Thank you very much.

@cliqer
Copy link
Author

cliqer commented Jul 2, 2020

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
Copy link

Aferz commented Jul 2, 2020

@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
Copy link
Author

cliqer commented Jul 2, 2020

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

@lrsoy
Copy link

lrsoy commented Jul 4, 2022

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
Copy link

shtse8 commented Aug 12, 2022

 Cannot read properties of null (reading '_leaveCb')

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

@ihorbond
Copy link

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

@shtse8
Copy link

shtse8 commented Aug 16, 2022

@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
Copy link

@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.

@shtse8
Copy link

shtse8 commented Aug 17, 2022

@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.

same thought, it happens most while routing.

@silvio-e
Copy link

silvio-e commented Sep 3, 2022

Hot reloading it is for me - experienced with Nuxt 3.0.0-rc.8 + Nuxt 3.0.0-rc.9

@shtse8
Copy link

shtse8 commented Sep 3, 2022

@posva this should not be closed. the error still exists.

@marianheinsen
Copy link

Also happening to me with Nuxt 3.0.0-rc.9

@matheusliraofficial
Copy link

It's also happening to me with Nuxt 3.0.0-rc.4

@matheusliraofficial
Copy link

I managed to solve the problem in my Nuxt3 application, I'll leave the report here in case it helps someone:

There was a page in my application that rendered a component that had a v-if and checked two refs, if it didn't meet the condition it would go to the v-else component, as in this example below:

<template>
   <div v-if="ref1 && ref2">
     <div :prop="ref2"></div>
   </div>
   <div v-else>
   ...
   </div>
</template>

I had a button with a function in the onClick event in my component to toggle the ref to show the component on v-else, when I was toggling my ref from true to false, I was having the issue.

Here is the solution that I found, In the first component where I have the v-if, there was another component inside that received one of the refs as props and I was checking if it existed before rendering it to not generate a break, so what I did was basically this:

<template>
   <div v-if="ref1">
     <div v-if="ref2" :prop="ref2"></div>
   </div>
   <div v-else>
   ...
   </div>
</template>

I removed the ref from the first condition and created a new v-if in the child component.

@u12206050
Copy link

u12206050 commented Mar 7, 2023

I seem to be having the exact same issue now, not using nuxt though, just vite and vue.

<router-view v-slot="{ Component, route }">
      <transition name="popover-bottom" as="div" class="popover popover-bottom">
        <keep-alive>
          <component :is="Component" :key="route" />
        </keep-alive>
      </transition>
    </router-view>

I've tried many different things but the error keeps popping up when I am trying to directly navigate/reload on a subpage

issue-route-transition

@danielvlla
Copy link

Experiencing reading '_leaveCb' error on hot reload with Nuxt 3.5.3 too

@juane1000
Copy link

Also experiencing this error on hot reload with Nuxt 3.6.5.

Since it's happening to others not necessarily using Nuxt I'm not sure how useful my details are but in my case it's happening on the only Page that uses a Layout.

Disabled transitions for now to make the errors go away

@Venegrad
Copy link

error still there

@pedrodruviaro
Copy link

same error with nuxt 3.10. Removing page transitions works fine..

ChopDennis pushed a commit to ChopDennis/nuxt-imgenie-admin that referenced this issue Feb 20, 2024
@danwritecode
Copy link

This issue still exists with nuxt 3.13.2. Disabling transitions solves it. Why is this closed?

@geminigeek
Copy link

same here still having this issue in 3.13.2.

runtime-core.esm-bundler.js?v=620dff95:1296 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'Symbol(_leaveCb)')
    at Object.beforeEnter (runtime-core.esm-bundler.js?v=620dff95:1296:82)
    at mountElement (runtime-core.esm-bundler.js?v=620dff95:4839:18)
    at processElement (runtime-core.esm-bundler.js?v=620dff95:4767:7)
    at patch (runtime-core.esm-bundler.js?v=620dff95:4635:11)
    at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js?v=620dff95:5275:11)
    at ReactiveEffect.run (reactivity.esm-bundler.js?v=620dff95:195:19)
    at setupRenderEffect (runtime-core.esm-bundler.js?v=620dff95:5403:5)
    at runtime-core.esm-bundler.js?v=620dff95:7139:9

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests