Error when navigating with tabs

Ionic Framework Ionic Vue
1

I updated all my ionic/ionic-vue packages and now I’m getting the following error in the JS console:
Uncaught (in promise) TypeError: Cannot read property 'tab' of null

That line is:
const activeChild = childNodes.find((child) => child.props.tab === activeTab);

When I debug this line, I can see childNodes[3].props.tab resolves to “help” and activeTab resolves to “help” too. Really confused.

I’m also getting the error when navigating (not by the tab bar):
Uncaught (in promise) TypeError: Cannot read property 'classList' of undefined

Which goes back to this line:
leavingEl.classList.add('ion-page-hidden');

What should I do? Rebuild the tab project from scratch?

I don’t think I’m doing anything weird. I have routes setup so you have to login with Firebase before you see the tab bar. But everything seems to be good with that. Let me know what code I need to share. Thanks!

2

Can you share an example or GitHub repo? Hard to say what the issue is without being able to reproduce the issue myself.

3

Hi Liam, I will start with a fresh project and setup the different views (errr vues?) and then see if the problem persists. If so, I’ll make that the repo that I share! I’ll get back to you in a couple hours!

1 Like
4

OMG, I figured it out and it’s so dumb! :man_facepalming:t2: So here was my navigation structure:

  • Intro screen (no tabs): This screen has a login modal which redirects to Tab 1
  • Tabs
    - Tab 1
    - Tab 2
    - Tab 3
    - Tab 4
    - Logout: This button brings you back to Intro

So I was getting the error in two places. On navigation from Intro to Tab 1 and from Logout to Intro. Turns out I didn’t have a <ion-page> inside the <template> inside the Intro.vue file. It went from <template> to <ion-content> and that caused all of this! Ugh!

3 Likes