Illegal Invocation for nodejs bundled app on a module that exports requestAnimationFrame

Question

I'm using nodeJs and webpack to build a client side application. I've built a module 'animationFrame.js' that exports requestAnimationFrame based on this article.

exports.requestAnimationFrame = window.requestAnimationFrame
    || window.mozRequestAnimationFrame
    || window.webkitRequestAnimationFrame
    || window.msRequestAnimationFrame
    || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 
 
exports.cancelAnimationFrame = window.cancelAnimationFrame
    || window.mozCancelAnimationFrame
    || function(requestID){clearTimeout(requestID)} //fall back

I am using the callback to wait for a generated div to be rendered so that it can be updated based on data returned from a callback method.

function mycallback(id, data){
  let sel = $('div.'+id);
  if(!sel.size()){ // wait until element is ready
    animation.requestAnimationFrame(function(){
      mycallback(id, data);
    });
  } else {
    if(data == null) $('div.'+id).remove();
    else if(data && data.Title) sel.text(data.Title);
    else sel.text('No Data');
  }
}

However I'm getting an Illegal invocation error on the call to animation.requestAnimationFrame. How can I make functions modular to abstract the functionality?

score 0 · Answer 1 · answered Jan 03 '18 at 17:59

Some more searching showed that it was a scoping problem. I was able to get it working by altering my module using bind().

exports.requestAnimationFrame = window.requestAnimationFrame.bind(window)
    || window.mozRequestAnimationFrame.bind(window)
    || window.webkitRequestAnimationFrame.bind(window)
    || window.msRequestAnimationFrame.bind(window)
    || function(f){return setTimeout(f, 1000/60)} // simulate calling code 60 

exports.cancelAnimationFrame = window.cancelAnimationFrame.bind(window)
    || window.mozCancelAnimationFrame.bind(window)
    || function(requestID){clearTimeout(requestID)} //fall back

"Uncaught TypeError: Illegal invocation" in Chrome

Illegal Invocation for nodejs bundled app on a module that exports requestAnimationFrame

1 Answers1