Invalid calling object

[cary-smith]

First and foremost: Nice implementation!
Second: I really do not want to make a request for IE11 but.....

I have just started to use this to decouple our library from framework cycles (like $digest in angular) but have run into a small issue when hot-reloading while running locally. Due to our use of use strict, IE11 cannot figure out what 'this' is for the requestAnimationFrame. This does not affect the final build.

It is extremely similar to vuejs/vue#4465

Any chance you would be willing to ensure window objects are referenced? I would make a pull request but seem unable to at the moment.

Thanks!

[finngl]

I also get "Invalid calling object" in IE. For me this is not a small issue, though, since in my case it prevents the polyfill from working. I'd be very happy to see a solution soon - thanks!

[rssfrncs]

Yes, i get this problem in IE11 for a Vue project during development but it works flawlessly when built.

[que-etc]

@paulie4, @occamsraiser, @eeeps, @marchaos

Hi guys!

First things first, I'm terribly sorry for being such an ass and ignoring all your bug tickets. I had some personal issues to deal with. Now I'm mostly back on track and I'll respond or publish a fix for all of the tickets till the beginning of the next week.

@cary-smith, it seems that I see the problem though I don't how to reproduce it. Any ideas on how it can be done so that I can verify that the bug is fixed? Thanks.

[rssfrncs]

@que-etc

To mirror my setup you could scaffold a VueJS progressive web app project using vue-cli.

npm install vue-cli -g
vue init pwa resize-bug
// say no to testing, linting, routing
cd resize-bug
npm run start

Not sure if you are familiar with VueJS, if not add the following to src/App.vue,

<template>
  <div></div>
</template>

<script>
import ResizeObserverfrom 'resize-observer-polyfill'
export default {
  mounted() {
    const ro = new ResizeObserver((entries, observer) => {
      // not important for testing
      console.log(entries)
    });
   // root element defined in <template> above
    ro.observe(this.$el);
  }
}
</script>

I am able to reproduce this on demand, by using the start script, using the polyfill within a Vue component and viewing in IE11.

[jspath]

I am also experiencing this issue in IE11 in a preact/webpack app I am working on.

Binding the window object to requestAnimationFrame in src/shims/requestAnimationFrame.js fixes it for me:

export default (() => {
    if (typeof requestAnimationFrame === 'function') {
        return requestAnimationFrame.bind(window);
    }

    return callback => setTimeout(() => callback(Date.now()), 1000 / 60);
})();

Not sure if this is an acceptable solution or not, but it does seem to work without any ill effects.

[cary-smith]

@jspath is right which is also similar to the approach taken to fix the vuejs issue.

You could also use your isBrowser check from utility.

Any chance that could be applied?

[que-etc]

@cary-smith

I've released a patch in v1.5.0. Sorry that it took me so long.

Could anyone confirm that the problem is solved?

[cary-smith]

Works like a charm! Thank you for the update.

...And don't apologize for the timing. This has saved me a ton of time and IE11 will hopefully be a memory soon.

[que-etc]

Closing it then.