Random JavaScript error when navigating

Ionic Framework Ionic Vue
1

@ldebeasi Getting a common problem when navigating from one screen to another in my Ionic Vue project. Occasionally, I’ll get the error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')

Which points to at x (index.esm.js:1072):

leavingEl.classList.add('ion-page-hidden');

Full stack trace:

x	@	index.esm.js:1072
async function (async)		
x	@	index.esm.js:1071
V	@	index.esm.js:1134
(anonymous)	@	index.esm.js:938
Oe	@	runtime-core.esm-bundler.js:154
Ze	@	runtime-core.esm-bundler.js:163
z	@	runtime-core.esm-bundler.js:2032
oa	@	runtime-core.esm-bundler.js:329
ha	@	runtime-core.esm-bundler.js:370
Promise.then (async)		
ta	@	runtime-core.esm-bundler.js:286
na	@	runtime-core.esm-bundler.js:308
ia	@	runtime-core.esm-bundler.js:311
M	@	runtime-core.esm-bundler.js:2060
v	@	reactivity.esm-bundler.js:183
y	@	reactivity.esm-bundler.js:189
scheduler	@	reactivity.esm-bundler.js:854
v	@	reactivity.esm-bundler.js:183
y	@	reactivity.esm-bundler.js:189
set value	@	reactivity.esm-bundler.js:764
F	@	vue-router.esm-bundler.js:3133
(anonymous)	@	vue-router.esm-bundler.js:3187
Promise.then (async)		
(anonymous)	@	vue-router.esm-bundler.js:3184
(anonymous)	@	vue-router.esm-bundler.js:441
o	@	vue-router.esm-bundler.js:440

This is all within the handlePageTransition method. Any ideas what is happening? I find that the transitions in my app are jittery sometimes but not sure it’s directly related to this.

2

Do you have a reproduction case I can run?

3

Let me see if I can take my existing project and strip out many of the views and see if the navigation still acts wonky.

4

@ldebeasi Here is a sample repo I created:
https://github.com/tylerclark/NavigationIssue

And here is a video showing it happen too:

I don’t know exactly what is causing it. It’s really just clicking around and mostly going into a detail view and then clicking back. Eventually it breaks and then it stays broken. The worst part is on native app it usually means you have to force quit.

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'classList')

on line:

leavingEl.classList.add('ion-page-hidden');
5

In ionic version 5.6.14, sometimes router I got that the similar errors too.

6

Can everyone test this again on Ionic Vue v5.8.5? We fixed a few bugs in that release related to routing.

1 Like
7

Will monitor Sentry and report back in a few days! Thanks!

1 Like
8

Hi @ldebeasi, I am already test and current does not see any errors. Thanks alot :grinning:

1 Like
9

I am still seeing it in v5.8.5. I’m trying to figure out if there is any consistency to it.

UPDATE
There doesn’t seem to be any consistency to it. I only see it happening when going to an IonPage from a tab and then clicking the IonBackButton but not always. Once it starts doing it, it seems to be consistent until I navigate to a different tab. It doesn’t completely break the app. Once navigating away to a different tab and back to where it was throwing the error, it no longer throws the error.

10

@ldebeasi I can confirm this still happens since we added Sentry to notify us. However, it doesn’t actually mess up the UI or do anything bad. Seems to error on navigating away from a screen. Oh well. Hopefully fixed in v6.

11

Can you file an issue on our GitHub repo with a sample app I can clone to reproduce the issue?

12

I’ve already provided a repo… (scroll up), but I’ll fill an issue on your repo.

1 Like
13

Pretty big bug IMO, been getting this randomly for a few versions now. Seems like routing needs to be re-written with so many bugs/anomalies in it.

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

14

I am using ionic/vue@6.0.3 and ionic/vue-router@6.0.3 and still sting this issue Cannot read properties of undefined (reading ‘classList’)

                requestAnimationFrame(() => {
                    requestAnimationFrame(async () => {
                        enteringEl.classList.add('ion-page-invisible');
                        const result = await ionRouterOutlet.value.commit(enteringEl, leavingEl, {
                            deepWait: true,
                            duration: direction === undefined || direction === 'root' || direction === 'none' ? 0 : undefined,
                            direction,
                            showGoBack,
                            progressAnimation,
                            animationBuilder
                        });
                        return resolve(result);
                    });
                });

I am not using tabs. It happens when when trying to go back after pushing a new page into the router.

@ldebeasi Would appreciate any insights you can provide. Do you have any ideas why I am running into this issue?

15

For anyone else experiencing this issue with ionic/vue v6.x the only thing that worked for me to fix this error was workaround #2 using createMemoryHistory: bug: routing breaks after specific sequence of navigations and clicking on ion-back-button · Issue #23873 · ionic-team/ionic-framework · GitHub

16

This issue is over 3 years old now and it’s still not solved. Had I known of this bug beforehand I’d never have started my project with Ionic - yes, not just Ionic Vue - routing bugs are appearing accross frameworks, React as well as Angular, with Angular seemingly having the least problems.

Genuine question: how do you guys handle this issue? I myself simply don’t feel like submitting my app to users knowing it will occasionally break.

With tab navigation I found that one can lower the probability of this bug occuring by setting swipeBackEnabled and hardwareBackButton to false. But that does not solve the problem and takes away from the native user expirience.

I’m really looking for input that could help me achieving a state/solution that would make me content to ship my app to my users.

17

Are you on Ionic 8 (Vue)? I haven’t noticed this issue for a while now in our app.

18

Yes, I’m on ionic/vue 8.4.1. I opened an issue on Github already in april, which got accepted/marked as bug and it appears that several other people are experiencing it too.

1 Like