Commenting out <ion-tab-button> causes issues

Somewhat related to another post I made about seeing strange errors like:
Uncaught (in promise) TypeError: Cannot read property 'tab' of null

I found that if I HTML comment out a <!--ion-tab-button--> within a <ion-tab-bar> it causes that error when navigating to anything to the right off that navigation item. When I look at the array returned by childNodes on the line const activeChild = childNodes.find((child) => child.props.tab === activeTab); it has more items in it than it should!

This post was flagged by the community and is temporarily hidden.

Can you post a GitHub repo that shows this issue happening?

I can but it’s going to be the default tab based project with one tab commented out.

Can you provide some steps I can use to reproduce the issue? Are you just taking a tabs starter app and removing all instances of ion-tab-button?

No you don’t remove any instances of ion-tab-button, you simply comment out one instance like <!--ion-tab-button--> and all hell breaks loose.

Thanks, I see the issue. I created a PR that resolves this: https://github.com/ionic-team/ionic-framework/pull/22643

A fix for this issue will be available in an upcoming release of Ionic Framework.

1 Like

Awesome, thank you! Luckily the workaround is easy cheesy!