bug: certain combinations of ionic components cause memory leak

[Lucas-Quinn-1163273]

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.

Stencil Version

@stencil/core at all versions, 2.x, 3.x, 4.x and the latest 4.8.2. Haven't tried 1.x.

Current Behavior

This type of leaking occurs in the production and development environment, resulting from the combination of certain components. Though the specific combinations causing this issue are unidentified, instances like the reported issue link confirm its occurrence in production mode.

An example of reproducing leaking involves combining ion-tabs with ion-nav is offered in my repo https://github.com/lucas-quinn/ionic-memory-leak , causing memory leaks in production mode.

There are many examples if you request. But they are very different and hard to find. Individually, these ionic components do not cause leaking in the development environment, making it challenging to identify the root cause. We have many codes do having memory leaking, and we couldn't share the code now because it's pretty hard to extract the minimal code to reproduce it, it requires prod build, if you request we will provide some more examples.

As of now, there is no discernible pattern on how these combinations cause leaks, making it difficult to prevent them, adding significant complexity to debugging in a production build.

This pervasive memory leak issue undermines our confidence in using Stencil for production, as it leads to app crashes on both mobile and desktop platforms.

We kindly request marking this issue as a top priority and addressing it at the earliest convenience. Thank you for your prompt attention.

For reference, there is another kind of leaking, please check this issue. #5172 Not sure how it effects each other.

Expected Behavior

Detached elements should be garbage collected.

System Info

npx @stencil/core info


System: node 21.4.0
    Platform: darwin (23.2.0)
   CPU Model: Apple M2 (8 cpus)
    Compiler: /Users/[username]/.npm/_npx/0eea9657e3e2e6b9/node_modules/@stencil/core/compiler/stencil.js
       Build: 1702322155
     Stencil: 4.8.2 🐳
  TypeScript: 5.2.2
      Rollup: 2.42.3
      Parse5: 7.1.2
      Sizzle: 2.42.3
      Terser: 5.26.0

Tried different browsers, different systems, different node versions, different typescript versions too.

Steps to Reproduce

Clone the repo

To reproduce the issue:

1. Run npm install.
2. Execute npm run start.
3. Click the button to observe the memory leak issue.

Code Reproduction URL

https://github.com/lucas-quinn/ionic-memory-leak

Additional Information

No response

[rwaskiewicz]

Thanks @lucas-quinn !

Similar to my comment in #5172, can you do me a favor add a few screenshots of what you're seeing in terms of memory leaks? I'd like to make sure we're working on the issue/type of memory leak reported here. Thanks!

[Lucas-Quinn-1163273]

Added two screenshots. Using Microsoft Edge - Detached Elements here because Chrome doesn't offer this devtool to easily debug detached elements. But Chrome does offer memory profiling.

[rwaskiewicz]

Thanks @lucas-quinn! I've validated this bug with the reproduction case + the screenshots. I've labeled it to get it ingested into our backlog to prioritize.

[EmanueleColombo00]

Hi, @lucas-quinn and @rwaskiewicz do you happen to have found a solution?
Because I might have a similar problem and can't find a way around it

[andrewmozolev]

Hi, @lucas-quinn and @rwaskiewicz do you happen to have found a solution? Because I might have a similar problem and can't find a way around it

Hi @EmanueleColombo00, our solution is a migration to React.

[EmanueleColombo00]

Hi, @lucas-quinn and @rwaskiewicz do you happen to have found a solution? Because I might have a similar problem and can't find a way around it

Hi @EmanueleColombo00, our solution is a migration to React.

Hi @andrewmozolev,
Unfortunately that's not a great solution for us... it would take weeks to migrate the whole application to React, is there any other way that you know that might mitigate the problem?

[andrewmozolev]

Hi, @lucas-quinn and @rwaskiewicz do you happen to have found a solution? Because I might have a similar problem and can't find a way around it

Hi @EmanueleColombo00, our solution is a migration to React.

Hi @andrewmozolev, Unfortunately that's not a great solution for us... it would take weeks to migrate the whole application to React, is there any other way that you know that might mitigate the problem?

Hi @EmanueleColombo00, We are not rewriting the whole app to React. We rewrite the core of our app to vite+React and we converting Stencil pages into React to reuse them(https://stenciljs.com/docs/react).