Ionic-framework: bug: cannot read property 'updateTiming' of undefined

[zxcian]

I recently created a new starter app with sidemenu but when I click on the sidemenu to navigate it throws an error. I haven't changed anything from the codes yet.

Here's my ionic info

 Ionic CLI                     : 5.2.7 
   Ionic Framework               : @ionic/angular 4.9.0
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.0.0

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.0.0
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

   cordova-res : 0.6.0
   native-run  : 0.2.8

System:

   Android SDK Tools : 26.1.1 
   NodeJS            : v10.16.3 
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.2.1 Build version 10E1001

[liamdebeasi]

Thanks for the issue. What device/version are you testing this on?

[ricksouzaa]

The same is happening to me! Is there any plain to fix it?

[liamdebeasi]

@ricksouzaa What device are you testing this on?

[ricksouzaa]

Android Emulator

[liamdebeasi]

@ricksouzaa Please try again on a physical device. We do not recommend testing Ionic apps on the Android simulator as they typically come with very outdated WebViews.

[ricksouzaa]

@liamdebeasi Really on the physical device it worked.
But it's not good, because we often use an emulator in a develop stage.

[jorgealejandrosaavedrarios]

@liamdebeasi I have the same problem and i'm trying it in a physical device.

[liamdebeasi]

@jorgealejandrosaavedrarios What is your device's user agent?

[jorgealejandrosaavedrarios]

@jorgealejandrosaavedrarios What is your device's user agent?

Mozilla/5.0 (Linux; Android 6.0.1; SM-G900M) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.143 Mobile Safari/537.36

That's useful?

[liamdebeasi]

Yes, thanks! Are you able to provide a code reproduction of the issue?

[jorgealejandrosaavedrarios]

Yes, thanks! Are you able to provide a code reproduction of the issue?

Exactly the same error, in a completely new sidemenu project at the moment of try to select an option of the menu, and the menu never closes:

vendor-es2015.js:103997 Uncaught (in promise) TypeError: Cannot read property 'updateTiming' of undefined
at vendor-es2015.js:103997
at Array.forEach ()
at updateWebAnimation (vendor-es2015.js:103996)
at Object.update (vendor-es2015.js:104039)
at vendor-es2015.js:104035
at Array.forEach ()
at update (vendor-es2015.js:104034)
at Object.direction (vendor-es2015.js:103711)
at Menu.startAnimation (38-es2015.js:238)
at Menu._setOpen (38-es2015.js:211)

Fragment of the vendor js at line 103997:

const updateWebAnimation = () => {
getWebAnimations().forEach(animation => {
animation.effect.updateTiming({
delay: getDelay(),
duration: getDuration(),
easing: getEasing(),
iterations: getIterations(),
fill: getFill(),
direction: getDirection()
});
});
};

[liamdebeasi]

Thanks for the follow up. I am using the sidemenu starter on an Android device with Chrome 76, but I am unable to reproduce the issue. I can open the side menu, tap an option, and the menu closes.

[jorgealejandrosaavedrarios]

Maybe i need to update some ionic/angular requirements?

[jorgealejandrosaavedrarios]

Hi @zxcian ! were you able to find something?

[ricksouzaa]

Started to happen after I updated my dependencies

Before (working):

Ionic:

Ionic CLI : 5.2.7 (/Users/ricardo/.nvm/versions/node/v12.10.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.8.1
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.1, (and 5 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (/Users/ricardo/Library/Android/sdk)
ios-sim : 8.0.2
NodeJS : v12.10.0 (/Users/ricardo/.nvm/versions/node/v12.10.0/bin/node)
npm : 6.11.3
OS : macOS Mojave
Xcode : Xcode 10.3 Build version 10G8

After (break):

Ionic:

Ionic CLI : 5.2.7 (/Users/ricardo/.nvm/versions/node/v12.10.0/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.9.0
@angular-devkit/build-angular : 0.801.3
@angular-devkit/schematics : 8.1.3
@angular/cli : 8.1.3
@ionic/angular-toolkit : 2.0.0

Cordova:

Cordova CLI : 9.0.0 ([email protected])
Cordova Platforms : android 8.0.0
Cordova Plugins : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.1, (and 4 other plugins)

Utility:

cordova-res : not installed
native-run : 0.2.8

System:

Android SDK Tools : 26.1.1 (/Users/ricardo/Library/Android/sdk)
NodeJS : v12.10.0 (/Users/ricardo/.nvm/versions/node/v12.10.0/bin/node)
npm : 6.11.3
OS : macOS Mojave
Xcode : Xcode 10.3 Build version 10G8

[faridesquivel]

I have the same issue with every project that uses the sidemenu only in Android emulator. I've tried to change a lot of things but didn't have luck so I started with a blank project and even If I only add a side menu like:

Management

<ion-content>
  <ion-list>
    <ion-menu-toggle>
      <ion-item lines="none" routerLink="/home">
        <ion-icon name="business" slot="start"></ion-icon>
        <ion-label>Main menu</ion-label>
      </ion-item>
    </ion-menu-toggle>
    <ion-menu-toggle>
      <ion-item lines="none" (click)="onLogout()" button>
        <ion-icon name="exit" slot="start"></ion-icon>
        <ion-label>Logout</ion-label>
      </ion-item>
    </ion-menu-toggle>
  </ion-list>
</ion-content>

In app component and then:

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
        <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Welcome
    </ion-title>
  </ion-toolbar>
</ion-header>

in the home file.
After I run this blank project with ionic capacitor run android and open it in my emulator I tap on the sidemenu icon, the sidemenu opens and If I click out side the side menu or try to swipe to the left to hide it I get the errors:

capacitor-runtime.js:351 TypeError: Cannot read property 'getComputedTiming' of undefined
at main-es2015.3e48541e2850f426d9c9.js:1
at Array.forEach ()
at te (main-es2015.3e48541e2850f426d9c9.js:1)
at Object.progressStep (main-es2015.3e48541e2850f426d9c9.js:1)
at main-es2015.3e48541e2850f426d9c9.js:1
at Array.forEach ()
at Object.progressStep (main-es2015.3e48541e2850f426d9c9.js:1)
at l.onMove (54-es2015.d0f662b3741135b0dc3c.js:1)
at onMove (54-es2015.d0f662b3741135b0dc3c.js:1)
at S (main-es2015.3e48541e2850f426d9c9.js:1)

main-es2015.3e48541e2850f426d9c9.js:1 Uncaught TypeError: Cannot read property 'updateTiming' of undefined
at main-es2015.3e48541e2850f426d9c9.js:1
at Array.forEach ()
at Object.re [as update] (main-es2015.3e48541e2850f426d9c9.js:1)
at main-es2015.3e48541e2850f426d9c9.js:1
at Array.forEach ()
at re (main-es2015.3e48541e2850f426d9c9.js:1)
at Object.easing (main-es2015.3e48541e2850f426d9c9.js:1)
at l.onEnd (54-es2015.d0f662b3741135b0dc3c.js:1)
at onEnd (54-es2015.d0f662b3741135b0dc3c.js:1)
at $ (main-es2015.3e48541e2850f426d9c9.js:1)

Also If I swipe right without tapping the home button I get the same errors and the sidemenu never opens again.

Thank you for your help!

[Deadknight]

Older android devices are firing this error.
Update to 4.9.0

Add this code to entry point (for me its main.js)

var chromeVersion=parseInt((/Chrome\/([0-9]+)/.exec(navigator.userAgent)||[,0])[1]);
if(chromeVersion > 0 && chromeVersion < 77)
  Element.prototype.animate = null;

It temporarily fixes it. not tested on ios yet.

I believe old versions of chrome does not have updateTiming in animation. animation.ts thinks it supports new animations correctly.

https://github.com/ionic-team/ionic/blob/07140cf2c5585e2177c2b2e8dc09e3671afcd1b6/core/src/utils/animation/animation.ts#L45

This line is the problem.

Maybe you can check updateTiming?

[lvdovicb]

We had the problem. It was an update.
We are at @ionic/angular 4.6.2 but the new build was in @ionic/angular 4.9.0.
The downgrade solved the issue.

[pandeeswaran]

For Android - We had the same problem in @ionic/angular 4.9.0.

I have tested android device the version(6.0.1)

[liamdebeasi]

@Deadknight yeah the feature detection there likely needs improvements. While I am going to fix this issue, I am still interested in reproducing this issue first. What is the user agent of the device you are testing this on?

[liamdebeasi]

Actually if everyone can let me know the user agent of the device they are testing this on, that would be best. Chrome _should_ support getComputedTiming, updateTiming, etc so maybe there's a version difference here that I'm not considering.

update: see https://github.com/ionic-team/ionic/issues/19272#issuecomment-528823877

[Deadknight]

@liamdebeasi

Mozilla/5.0 (Linux; Android 5.1.1; GT-N7100 Build/LMY49J; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/74.0.3729.157 Mobile Safari/537.36

Android System Webview
version 74.0.3729.157

[liamdebeasi]

Hi everyone,

I have implemented a fix for this. Can you all give the following dev build a try and let me know how it goes?

If using Ionic Angular: npm i @ionic/[email protected]
If using Ionic Core: npm i @ionic/[email protected]

Thanks!

[pandeeswaran]

Hi everyone,

I have implemented a fix for this. Can you all give the following dev build a try and let me know how it goes?

If using Ionic Angular: npm i @ionic/[email protected]
If using Ionic Core: npm i @ionic/[email protected]

Thanks!

I tried in my project with following the npm comment
I got this error (Module not found: Error: Can't resolve './animation-d0becaea.js' )
ERROR in ./node_modules/@ionic/core/dist/esm/ion-alert-md.entry.js
ERROR in ./node_modules/@ionic/core/dist/esm/ion-alert-ios.entry.js
Module not found.
Shall i know its changed in ionic 4.10.0

[liamdebeasi]

@pandeeswaran That's strange. Try this dev build: 4.10.0-dev.201909061231.2ea728e

Are you using an Ionic/Angular app or just an Ionic Core app?

[pandeeswaran]

@pandeeswaran That's strange. Try this dev build: 4.10.0-dev.201909061231.2ea728e

Are you using an Ionic/Angular app or just an Ionic Core app?

Yes i am using an ionic/Angular app.

Thanks @liamdebeasi Its working perfect in dev build.

This dev build: 4.10.0-dev.201909061231.2ea728e resolved this menu closing bug in Android.

One more concern: First time click the menu got this error. Its not affect anything. Just am asking
its part of menu closing bug.

main-es2015.bf8859ec2a8ea3276f03.js:16249 ERROR Error: Uncaught (in promise): JSON error
at resolvePromise (polyfills-es2015.651225db28f4e5ead140.js:806)
at resolvePromise (polyfills-es2015.651225db28f4e5ead140.js:765)
at zone.scheduleMicroTask (polyfills-es2015.651225db28f4e5ead140.js:867)
at ZoneDelegate.invokeTask (polyfills-es2015.651225db28f4e5ead140.js:413)
at Object.onInvokeTask (main-es2015.bf8859ec2a8ea3276f03.js:46101)
at ZoneDelegate.invokeTask (polyfills-es2015.651225db28f4e5ead140.js:412)
at Zone.runTask (polyfills-es2015.651225db28f4e5ead140.js:181)
at drainMicroTaskQueue (polyfills-es2015.651225db28f4e5ead140.js:583)

[liamdebeasi]

Glad to hear the issue is fixed.

Regarding the other error, there's not a lot of information in that error. Which line(s) of code is it referring to?

[pandeeswaran]

Glad to hear the issue is fixed.

Regarding the other error, there's not a lot of information in that error. Which line(s) of code is it referring to?

Thanks.

One more Request: Is it possible to add textarea in AlertController
./node_modules/@ionic/core/dist/esm/ion-alert-md.entry.js
./node_modules/@ionic/core/dist/esm/ion-alert-ios.entry.js

As of now not allowed textarea in AlertController.

[liamdebeasi]

I would recommend creating a new issue for that. This issue is focused on the animation error.

Regarding the error in your previous comment, which lines of code did that error refer to?

[adrianschneider94]

Hi,

got the same error with @ionic/react on Safari Desktop, I guess I just have to wait?

[liamdebeasi]

What version of desktop safari are you using? Safari doesn't support Web Animations yet, so I'm not sure how you would be getting that error.

[adrianschneider94]

Current Safari:

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

Unhandled Promise Rejection: TypeError: e.effect.updateTiming is not a function. (In 'e.effect.updateTiming({delay:J(),duration:Z(),easing:Y(),iterations:X(),fill:W(),direction:G()})', 'e.effect.updateTiming' is undefined)

In Technology Preview it works however.

Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1 Safari/605.1.15

[liamdebeasi]

So it's likely that you have Web Animations enabled in the "Experimental Features" menu for your version of Safari 12. I would recommend disabling it as it is an incomplete/still in development implementation of Web Animations.

Tech Preview works since that is a newer/more complete implementation (which is closer to what people will get when Web Animations ships in Safari)

[adrianschneider94]

Indeed, they were turned on.

I can't remember turning them on, but it works perfectly now, thanks!

[cgossett]

Using the dev branch 4.10.0-dev.201909061231.2ea728e fixed the issue for me as well on an Android Pixel 2 emulator. Is there any timeline on when this branch might get pulled in to a release? I've just started using Ionic and am fairly new as well to watching and tracking issues on GitHub.

[TheBlueAssasin]

I can confirm that this branch 4.10.0-dev.201909061231.2ea728e also fixes the issue in Chromium/Electron

[federufino]

This fix the bug for me in the android emulator. Thanks.

[liamdebeasi]

Thanks for the issue. This issue has been resolved via https://github.com/ionic-team/ionic/pull/19288 and will be available in the next release of Ionic. In the meantime, feel free to continue to use the dev build.

For any other bugs, please open a new issue. Thanks!

[ruvalter]

@liamdebeasi sorry but I am not sure what to do here. My index breaks whenever I close it. I git the same error above. When I turn on the experimental features - web animations it works fine. So, what should I be doing? There is a bug for real and you have fixed? Which version will it be in? What can do to fix it for now? My current version is 4.1.0.

[Zer0ne83]

@liamdebeasi - 4.10.0-dev.201909061231.2ea728e fixed the issue for me, now working on all platforms, emulation and builds. Thank you, I was tearing my hair out.

[darit]

Updating @ionic/angular to latest did the trick. Thanks.
npm i @ionic/angular

[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.