bug: vue, undefined error when leaving tabs and coming back

[tylerclark]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x

Current Behavior

When navigating, occasionally you'll get an error when exiting a page and entering into a new page

Expected Behavior

No javascript errors

Steps to Reproduce

It's very random, but the repo I have made shows it. I have also made a video demostrating this:
https://www.youtube.com/watch?v=4SvtlCTgn7k

Code Reproduction URL

https://github.com/tylerclark/NavigationIssue

Ionic Info

No response

Additional Information

No response

[tigohenryschultz]

We're getting this bug too, seems to happen fairly often/easily.

[tylerclark]

Yes! Others have reported this as well! https://forum.ionicframework.com/t/random-javascript-error-when-navigating/216785/7

[sean-perkins]

Hey all 👋 thanks for reporting this issue and for the helpful conversation on the forums.

The React and Vue implementations for routing are very similar and upon a further investigation there are some additional checks for the leaving element with route transitions that exists in the React implementation that aren't present in the Vue implementation.

Carrying forward some added context from the forum discussion that highlights the stacktrace/exception:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘classList’)
at handlePageTransition (index.esm.js:1082)

I'm working on routing issues for the next few days, so I'll work with the team to get a dev build that addresses the solution for the Vue implementation.

Would greatly appreciate some extra help testing that dev build in your app(s) when it's available.

[tigohenryschultz]

I'll be willing to test any new dev builds for these issues, they've been plaguing me for a while. Ping me when you have a dev build ready. Another routing issue if you have time: #24303

[averyjohnston]

Additional reproduction case that seems to have the same underlying cause: https://github.com/tigohenryschultz/router-undefined-reference

Buttons to click to trigger errors:

1. Go to Page 2
2. Go to Page 3
3. Go to Tab 1
4. Tab 2
5. Tab 1
6. Go Back Page 3 (error)
7. Go Back Page 3 again
8. Go to Tab 1
9. Go Back Page 1 (different error)

[liamdebeasi]

Can everyone test the following dev build and let me know if it resolves the issue?

npm install @ionic/[email protected] @ionic/[email protected]

Note: This is an Ionic 5 dev build. However, this fix will be available in both Ionic 5 and Ionic 6 when it ships.

[tigohenryschultz]

Still seeing an issue with router.go, I went back -3 times from a tabs page, my log shows it should have rendered page 'a', but it was still on page 'b'. No errors. After clicking back again I received:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'ionPageElement')
    at handlePageTransition (index.esm.js:1048)
    at Object.enteringViewItem.registerCallback (index.esm.js:1168)
    at registerIonPage (index.esm.js:1196)
    at Proxy.registerIonPage (index.esm.js:1229)
    at Proxy.mounted (index.esm.js:873)
    at callWithErrorHandling (runtime-core.esm-bundler.js:6708)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6717)
    at Array.hook.__weh.hook.__weh (runtime-core.esm-bundler.js:1970)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:6909)
    at flushJobs (runtime-core.esm-bundler.js:6954)

This might be more related to the ticket @amandaesmith3 mentioned: https://github.com/tigohenryschultz/router-undefined-reference

[tigohenryschultz]

Also reproduced this tickets bug again:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')
    at isViewVisible (index.esm.js:884)
    at handlePageTransition (index.esm.js:1083)
    at setupViewItem (index.esm.js:1173)
    at index.esm.js:941
    at callWithErrorHandling (runtime-core.esm-bundler.js:6708)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6717)
    at Array.job (runtime-core.esm-bundler.js:7125)
    at flushPreFlushCbs (runtime-core.esm-bundler.js:6881)
    at flushJobs (runtime-core.esm-bundler.js:6922)

[liamdebeasi]

Seems like a different issue. I reopened #24303 and we will investigate further.

[tigohenryschultz]

Still getting:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')
    at isViewVisible (index.esm.js:884)
    at handlePageTransition (index.esm.js:1083)
    at setupViewItem (index.esm.js:1173)
    at index.esm.js:941
    at callWithErrorHandling (runtime-core.esm-bundler.js:6708)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:6717)
    at Array.job (runtime-core.esm-bundler.js:7125)
    at flushPreFlushCbs (runtime-core.esm-bundler.js:6881)
    at flushJobs (runtime-core.esm-bundler.js:6922)

[liamdebeasi]

@tigohenryschultz This is related to #24303, not this issue. The enteringViewItem in your sample app is undefined, resulting in the error above.

[liamdebeasi]

Thanks for the issue. This has been resolved via #24337, and a fix will be available in an upcoming release of Ionic Framework.

The issue mentioned in #24332 (comment) and #24332 (comment) will be tracked in #24303.

[liamdebeasi]

This has been released in Ionic 6.0.1 and Ionic 5.9.3. Ionic 5 users can use the v5-lts tag to get the latest version of Ionic 5:

npm install @ionic/vue@v5-lts @ionic/vue-router@v5-lts

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.