bug: menuInnerEl is undefined in menu when routing back a page

[KANekT]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• [ ] v4.x
• [ ] v5.x
• [X] v6.x

Current Behavior

"@ionic/vue": "^6.0.10",

ion-menu.js not sync with core

Expected Behavior

in "@ionic/vue": "6.0.10" const width = this.menuInnerEl.offsetWidth;

in code https://github.com/ionic-team/ionic-framework/blob/main/core/src/components/menu/menu.tsx#L406 const width = this.menuInnerEl!.offsetWidth; - with !

Steps to Reproduce

npm install go to ..\node_modules@ionic\core\components\ion-menu.js

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.1 (C:\Users\KANekT\AppData\Roaming\npm\node_modules@ionic\cli) Ionic Framework : @ionic/vue 6.0.10

Capacitor:

Capacitor CLI : 3.4.3 @capacitor/android : 3.4.3 @capacitor/core : 3.4.3 @capacitor/ios : 3.4.3

Utility:

cordova-res : not installed globally native-run : 1.5.0

System:

NodeJS : v16.13.0 (C:\Program Files\nodejs\node.exe) npm : 8.1.4 OS : Windows 10

Additional Information

No response

[KANekT]

await this.loadAnimation(); why it exec loadAnimation if animated = false ?

[liamdebeasi]

Thanks for the issue. Can you please describe the problem you are running into?

[KANekT]

@liamdebeasi

i have ion-menu on page

then i go to another page where there is no menu

then i go back

ion-menu not work - in console "this.menuInnerEl.offsetWidth is undefined"

[liamdebeasi]

Can you please provide a GitHub repo I can use to verify this behavior?

[KANekT]

@liamdebeasi https://github.com/KANekT/ion-menu-bug

[KANekT]

[danielehrhardt]

@liamdebeasi Same Problem with Angular. Should i create a sample repo or can you reproduce?

[liamdebeasi]

I can reproduce the issue, thanks!

[KANekT]

@liamdebeasi you have any plan to fixed this Error ?

[nodiced922]

Is this being worked on? Is there a timeframe for the patch? This has been 3 months and is a major bug that breaks the menu. Its issues like these, that make me want to move on from ionic.

[nodiced922]

Any work arounds?

[danielehrhardt]

Any work arounds?

<ion-menu
      [disabled]="true"
       menuId="main"

app.component.ts:

ngAfterViewInit() {
       this.menuCtrl.enable(true, "main");
}

[ErnestoArtime]

Same problem, any solutions?

[nodiced922]

I had previously been Including my header which contained my menu on each page. I moved this to a single Instance up to my app component and I haven't had an issue with any bugs. I did have to rewire some events, etc triggered by the header, but it was worth the small amount of work to make this change

[KANekT]

i use hack in minify files after build vue-tsc --noEmit && vite build: find

    vs(!this.isAnimating,"can not be animating")

& replace

    this.isAnimating&&document.location.reload()

find loadAnimation() & add

typeof this.menuInnerEl=="undefined"&&document.location.reload();

and then use npx cap sync

[KANekT]

@liamdebeasi you planed or not fixed this bug ?

6 month ago it confirmed

[YuriZem]

Hi, I'm facing the same problem, any solution?

[dbertolini]

Same bug here!

[massitashakori]

Seeing the same bug on my app. The app got frozen with the first interaction after/while loading Does it seem it is the same bug reported in 2019?! https://github.com/ionic-team/ionic-framework/issues/17948

[StavM]

is there any progress on this one ? seems kind of absurd not to fix this one

[KANekT]

we must suffer and be in pain :)

[liamdebeasi]

Can everyone try the following dev build and let me know if it resolves the issue?

Angular

npm install @ionic/[email protected]

React

npm install @ionic/[email protected] @ionic/[email protected]

Vue

npm install @ionic/[email protected] @ionic/[email protected]

[KANekT]

how I can use this on v6 ?

[liamdebeasi]

Normally we don't release bug fixes to previous major versions of Ionic, but this is a high impact bug so I'd like to backport this patch to v6.

Here is a v6 dev build you can try: 6.7.3-dev.11680889549.1f830ade

[KANekT]

@liamdebeasi yes it fixed error in may application on v6, thanks

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/27141, and a fix will be available in an upcoming release of Ionic Framework.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.