ionic-framework: bug: header adds cloned elements outside of root context, causing appload to get fired multiple times

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

We currently get many Errors (over thousand in two days) like this one in Production:

https://sentry.io/share/issue/f73db0f955c84087ae68e7ae94567495/

We don’t use the IonSlides anymore, we already migrated to use swiperjs directly.

Expected Behavior

understand why this is happening
Fix it 😃

Steps to Reproduce

I can not really reproduce this locally, so i guess this makes it a bit harder^^

But maybe you have an idea or something we can start with to understand this bug?

Code Reproduction URL

No response

Ionic Info

No response

Additional Information

No response

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 24 (22 by maintainers)

Most upvoted comments

The issue here is with the large title adding cloned elements outside of the root ion-app node: https://github.com/ionic-team/ionic-framework/blob/2916810a2b70631cf2d78228b42592d9eada5449/core/src/components/header/header.utils.ts#L27

This causes Stencil to think it is creating a brand new app.

liamdebeasi on Oct 20, 2021

This issue will be resolved in an upcoming release of Ionic 6 RC. Swiper 7 resolves a lot of async initialization issues in Ionic so listening for appload will no longer be needed.

liamdebeasi on Oct 26, 2021