"Invalid calling object" error in IE

[euan-smith]

Vue.js version

1.0.28

Reproduction Link

I've identified what is needed to fix the bug and I think, by inspection, it is the right thing to do. Producing a fiddle to reproduce this is somewhat complex and seems out of proportion to the fix, however if I absolutely have to then I will.

Steps to reproduce

Where there is an app with dynamic elements with transitions defined with callback hooks on the transitions, open it in IE (tested in 11 and 9,10 through emulation. No problem in other browsers)

What is Expected?

The transition completes with the hooks called at the right times.

What is actually happening?

The transition does not complete and an error is thrown in Vue: "Invalid calling object" on this code (which starts on line 37 src/transition.js, the error is thrown on line 40):

const raf = inBrowser && window.requestAnimationFrame
const waitForTransitionStart = raf
  /* istanbul ignore next */
  ? function (fn) { raf(function () { raf(fn) }) } //<-- error thrown here!
  : function (fn) { setTimeout(fn, 50) }

The error seems to be because the requestAnimationFrame method of the window object is being called without its parent object.

What seems to fix it?

By changing line 37 to

const raf = inBrowser && window.requestAnimationFrame.bind(window)

the error goes away. Using bind seems, to me, obviously correct. Clealy in other browsers because the default this is the window object anyway it should not matter, however IE seems to take a dislike to this approach and throw the error. Binding window to the method would seem harmless otherwise.

I'm an old-hand at coding but new to github (and relatively new to JS and vue) - The fix works but I don't really know if there are other reasons why this is not a good idea so I'm cautious about just closing it.

[euan-smith]

As an addendum I can also fix it purely in my own code by window.requestAnimationFrame=window.requestAnimationFrame.bind(window); before the vue import. A bit of a hack, but sorts the problem until it is fixed in vue.

[jyllsarta]

Hello @zakalwe314 , I tried to reproduce this issue but I can't.
Reploduction link : https://jsfiddle.net/b6kjxhd5/8/
Is there anything I missed?

[euan-smith]

Thanks for looking into this. I'll checkout your jsfiddle and get back to you. We had the problem in both of our apps in testing on ie - however they are also both quite large so I didn't have much luck isolating the problem last time, but I will try some more.

[euan-smith]

OK, so I think I know what is hapenning, and unfortunately I don't know how to reproduce it on jsfiddle.

basically my code is built with webpack and "use strict" is the case everywhere.

According to mdn when a method is called with an undefiend this (which is the case here) then when NOT in strict mode then this=window however when "use strict" is enabled then this stays undefined.

It would seem that the call to raf detached from the window object should, then, in strict mode throw the error I see and it would be best practice to fix it. It would also seem to be the case that in everything except ie that all is good. I'm testing the code using the standard vue builder and npm run dev which executes code in eval statements for hot-reloading. Note that on ie the following throws an error:
eval('"use strict";var raf=window.requestAnimationFrame;raf(function(){})');
but not, for example, in Chrome or Firefox.

Is that enough evidence of an issue to get it fixed?

[posva]

eval('"use strict";var raf=window.requestAnimationFrame;raf(function(){})'); is a repro 😆
So it's an issue with hot reloading in IE. I'll create a PR

[rheupler]

Still running into this error in IE Edge.