Trying to use this in React project and "Blob" is not defined

[davidrhoderick]

Looks like there is a missing dependency "Blob". How do I remedy? I tried installing blob from npm and importing it but it didn't work.

ReferenceError: Blob is not defined
    at eval (webpack-internal:///./packages/interpayments-theme/node_modules/can-autoplay/build/can-autoplay.es.js:6:14)
    at Module../packages/interpayments-theme/node_modules/can-autoplay/build/can-autoplay.es.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:5043:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/partials/page-hero.js:10:70)
    at Module../packages/interpayments-theme/src/components/partials/page-hero.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:6116:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/home.js:7:77)
    at Module../packages/interpayments-theme/src/components/home.js (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:5900:1)
    at __webpack_require__ (/home/davidrhoderick/Development/interpayments/frontity/build/server.js:27:30)
    at eval (webpack-internal:///./packages/interpayments-theme/src/components/index.js:12:63)

[gkatsev]

Are you using it in SSR? Blob is available globally in browsers but not available globally in node.
This module probably isn't set up for SSR, currently.

[super-bunny]

You can use this workaround with Dynamic imports for SSR (tested with Next.js) until PR #38 is merged 🙂

import('can-autoplay')
  .then(module => module.default.video())
  .then(({ result }) => {
    if (result === true) {
      // Can auto-play
    } else {
      // Can not auto-play
    }
  })