Optionally Import GIF.js

[Gary McAdam]

There's a bug with GIF.js which breaks the React dev tools extensions in Chrome and Firefox, even when not using GIF.js (i.e. it happens immediately on import and commenting out the GIF.js import fixes it.)

Given that outputting as a GIF is optional in CCapture can we request an optional import so that we can avoid this if we don't need GIF.js?

See: jnordberg/gif.js#99

[Gary McAdam]

A short-term solution for this in WebPack is to do:

resolve: {
    alias: {
      './gif.js': path.resolve(__dirname, 'path/to/gif.js')
    }
  }

Where your own path/to/gif.js looks like:

export default () => {};

[kingpalethe]

I'm struggling to use this package with React, and the furthest I have gotten is with the fork mentioned here:

#78 (comment)

That reduces my console errors down to just this:

Uncaught TypeError: Failed to execute 'postMessage' on 'Window': 2 arguments required, but only 1 present.
    at renderFrame (C:\Users\username\workspace\composite\node_modules\ccapture.js\src\gif.js:2)
    at self.onmessage (C:\Users\username\workspace\composite\node_modules\ccapture.js\src\gif.js:2)

Which looks like an error just with the GIF package, which, like you, I don't need. Did you find a workaround for this?

[Gary McAdam]

@kingpalethe Yes, I think you need to polyfill window.postMessage. Assuming you do not need to use postMessage in your project, you could overwrite it with:

window.postMessage = () => {}

If you do, consider something like:

window._original_postMessage = window.postMessage;
window.postMessage = (message, targetOrigin = 'origin') => {
   window._original_postMessage(message, targetOrigin);
}

Alternatively, see above for how to just completely avoid using the GIF library entirely.

Hope this helps!