IONIC beta 12 strange error


#1

Hi,
I am getting error since i have upgraded my app to ionic beta 12.

Below is the error message and stack trace :

Error Message : TypeError: Cannot read property ‘clientWidth’ of undefined

Error StackTrace : TypeError: Cannot read property ‘clientWidth’ of undefined, at e.views.Scroll.e.views.View.inherit.resize (file:///android_asset/www/lib/ionic-1.0.0-beta.12/ionic.bundle.min.js:23:16312), at file:///android_asset/www/lib/ionic-1.0.0-beta.12/ionic.bundle.min.js:45:168, at file:///android_asset/www/lib/ionic-1.0.0-beta.12/ionic.bundle.min.js:152:445, at e (file:///android_asset/www/lib/ionic-1.0.0-beta.12/ionic.bundle.min.js:68:440), at file:///android_asset/www/lib/ionic-1.0.0-beta.12/ionic.bundle.min.js:72:120

This error occurs randomly any time, hard to replicate every time.

Page on which this error occurs uses Ionic Slidebox.

Place where this error occurs is :
resize:function({this.setDimensions(this.__container.clientWidth,this.__container.clientHeight,this.options.getContentWidth(),this.options.getContentHeight())}

Can you tell me what’s causing it?


#2

I am getting so many of these :frowning:


#3

Hmm, could you produce a codepen demo that has this error too?


#4

Has it got anything to do with opening a Modal?
Have a look and see if you’ve got multiple events occuring.
I was having this issue when an a tag had an ng-click for a modal, i.e.

<a href="#" ng-click="openModal()"</a>

If you remove the hash, everything works as no transition occurs.
Hope that helps.


#5

Hi, I’m having the same error, somewhere during bootstrapping.

TypeError: Cannot read property 'clientWidth' of undefined
    at ionic.views.Scroll.ionic.views.View.inherit.resize (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:4801:23)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:8616:18
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:21691:28
    at completeOutstandingRequest (file:///android_asset/www/lib/ionic/js/ionic.bundle.js:11901:10)
    at file:///android_asset/www/lib/ionic/js/ionic.bundle.js:12202:7 ionic.bundle.js:17470
(anonymous function)

#6

We are having this error too. It happens when changing states.

Uncaught TypeError: Cannot read property 'clientWidth' of undefined (caused by "undefined") ionic.bundle.js:4801ionic.views.Scroll.ionic.views.View.inherit.resize ionic.bundle.js:4801val ionic.bundle.js:8616(anonymous function) ionic.bundle.js:21691completeOutstandingRequest ionic.bundle.js:11901(anonymous function)

scrollView is null:

$timeout(function() {
    scrollView.run();
});

Also if we do

$rootScope.$on('$stateChangeSuccess', function(){
    $ionicScrollDelegate.scrollTop();
});

Then this.__container in undefined

resize: function() {
// Update Scroller dimensions for changed content
// Add padding to bottom of content
this.setDimensions(
 this.__container.clientWidth,
      this.__container.clientHeight,
      this.options.getContentWidth(),
      this.options.getContentHeight()
    );
},

Nothing of this happened in beta 11.

Any idea?


#7

This should be fixed in the nightly builds everyone.
Can you all test it and confirm?


#8

@mhartington
Update to nightly solves the issue, thanks


#9

Still problems with scroll in nightly :frowning:

Uncaught TypeError: Cannot read property 'scrollTo' of null (caused by "undefined") (caused by "undefined") (caused by "undefined") ionic.bundle.js:39909(anonymous function) ionic.bundle.js:39909deferred.promise.then.wrappedCallback ionic.bundle.js:19197(anonymous function) ionic.bundle.js:19283$get.Scope.$eval ionic.bundle.js:20326$get.Scope.$digest ionic.bundle.js:20138$get.Scope.$apply ionic.bundle.js:20430(anonymous function) ionic.bundle.js:21938completeOutstandingRequest ionic.bundle.js:12022(anonymous function)

After changing states (not always, only in the one that takes you to the homepage and not always either) scrollView is undefined:

this.scrollTop = function(shouldAnimate) {
this.resize().then(function() {
  scrollView.scrollTo(0, 0, !!shouldAnimate);
});

};

We have an scrollTop on every state change start:

$rootScope.$on('$stateChangeStart', function(){
    $ionicScrollDelegate.$getByHandle('mainScroll').scrollTop();
});

#10

Could you provide a codepen showing this error @ruben?


#11

hey @mhartington, sorry but I cannot provide it in a codepen as it’s happening in the application we are developing, not small and not in production yet. I tried to do a minimal version but then is not happening. For now I think we will just put the conditions to check if $scrollView or $element are defined and not null and do further investigation. Will update you if we manage to discover it.

Thanks.

Just in case it helps, also happening here, $element is null:

this.resize = function() {
return $timeout(resize).then(function() {
  $element.triggerHandler('scroll.resize');
});

};

error:

Uncaught TypeError: Cannot read property 'triggerHandler' of null (caused by "undefined") (caused by "undefined")   (caused by "undefined") ionic.bundle.js:39386 
(anonymous function) ionic.bundle.js:39386
wrappedCallback ionic.bundle.js:18984
(anonymous function) ionic.bundle.js:19070
Scope.$eval ionic.bundle.js:20094
Scope.$digest ionic.bundle.js:19906
Scope.$apply ionic.bundle.js:20198
(anonymous function) ionic.bundle.js:21705
completeOutstandingRequest ionic.bundle.js:11906
(anonymous function)

#12

I’m also experiencing this behavior.

It appears to only happen in beta 12, but not the nightly build * Ionic, v1.0.0-beta.12-nightly-485

I can reproduce this when my app uses $state.go(‘some.thing’).

TypeError: Cannot read property ‘run’ of null
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:39362:15
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:21691:28
at completeOutstandingRequest (http://localhost:8100/lib/ionic/js/ionic.bundle.js:11901:10)
at http://localhost:8100/lib/ionic/js/ionic.bundle.js:12202:7


#13

Ok I have a codepen link that shows the issue http://codepen.io/anon/pen/eAcHq
I am new to Ionic and dont understand it that well, this issue appears to happen when I have a tab with an href to a url outside the tabbed view. However It works fine if that tab is in the end of the tabs list, but does not work if it is anywhere else in the tab list. To elaborate, here is another code that shows signout working since it is in the end of the list http://codepen.io/anon/pen/dKvmH

Hope this issue can be fixed soon.
Also if you create a custom button on the nav-bar and link it to signout page, the same error occurs.
TypeError: Cannot call method ‘run’ of null
I am using ionic 1.2.5



#14

I am getting this exact same error. I’m running Ionic, v1.0.0-beta.13. I get the following:

Error: scrollView is null
this.scrollTop/<@http://localhost/lib/ionic/ionic-angular.js:4674:7
ac/u/s.promise.then/l@http://localhost.com/lib/angular/angular.min.js:1:50079
ac/e/<.then/<@http://localhost/lib/angular/angular.min.js:1:50765
yc/this.$get</a.prototype.$eval@http://localhost/lib/angular/angular.min.js:1:55675
yc/this.$get</a.prototype.$digest@http://localhost/lib/angular/angular.min.js:1:54349
yc/this.$get</a.prototype.$apply@http://localhost/lib/angular/angular.min.js:1:55996
e/l<@http://localhost/lib/angular/angular.min.js:1:61946
g@http://localhost/lib/angular/angular.min.js:1:17263
hh/c.defer/i<@http://localhost/lib/angular/angular.min.js:1:19028

This is happening when navigating back to home page. Any ideas what’s happening, or a fix?

Thanks

Tom


#15

Does you home view has an ion-content, ion-view or something special/ not “ionic-structure” like?


#16

hey @tschreck, didn’t investigate too much this one. Just added a quick fix in ionic.bundle.js (1.0.0-beta.13)

Line 39910:

  this.scrollTop = function(shouldAnimate) {
    this.resize().then(function() {
      if(typeof scrollView !== 'undefined' && scrollView !== null){
        scrollView.scrollTo(0, 0, !!shouldAnimate);
      }
    });
  };

And line 39813:

if (!angular.isDefined(scrollViewOptions.bouncing)) {
ionic.Platform.ready(function() {
  if(!scrollView){
      return;
  }
  scrollView.options.bouncing = true;

  if(ionic.Platform.isAndroid()) {
    // No bouncing by default on Android
    scrollView.options.bouncing = false;
    // Faster scroll decel
    scrollView.options.deceleration = 0.95;
  } else {
  }
});
}

The diff output:

diff ionic.bundle.wts.js ionic.bundle.js 
39815,39817d39814
<       if(!scrollView){
<           return;
<       }
39912,39914c39909
<       if(typeof scrollView !== 'undefined' && scrollView !== null){
<         scrollView.scrollTo(0, 0, !!shouldAnimate);
<       }
---
>       scrollView.scrollTo(0, 0, !!shouldAnimate);
44431c44426
< })();
---
> })();

Hope it helps


#17

Yep. Here’s my code:

<ion-content class="has-header">
    <ion-list type="list-inset" can-swipe="{{ListCanSwipe}}">
        <div class="item item-divider">
            <div class="buttons">
                 <h3 class="title">My Turn {{MyTurnCountMessage}}</h3>
            </div>
        </div>
        <ion-item ng-repeat="game in MyTurnList" class="item-icon-left" item="item">
            {{game.GameName}}
            <ion-option-button class="button-assertive">Delete</ion-option-button>
        </ion-item>
     </ion-list>
</ion-content>

What should I do on the home page to not cause this error to happen?

Thanks

Tom


#18

Thanks for the reply. I did the exact same thing but in ionic-angular.js so I can get past this issue so I can continue development. I’m hoping ionic will have a patch soon. I do not like modifying code that will get overwritten on the next release of vendor code.

Tom


#19

Hi,
I occur the same issue. I found I set the ion-view hide-back-button=“true”, then add the backbutton by myself, the back button has the attr ui-sref=“someStatus”, when I click it, it will log the same error message.

But if I replace ui-sref with ng-click=“myGoBackMethod()”, then no error message. I don’t know why, hope it helps.


#20

Just confirming that i have the same problem :frowning: no solution yet!