Importing Plyr breaks production Gatsby build

[alexhillel]

I'm trying to use Plyr 3.6.2 in a Gatsby 2.23.3 project, but a production build fails as no browser environment is available. I can get around this by using the loadable-components library to only render Plyr on the client-side, but this causes a jumpy loading experience. Is it possible to use Plyr like this in a static Gatsby build?

Expected behaviour

Plyr to import correctly during Gatsby build process, where browser environment is not available.

Actual behaviour

In the production build process, import Plyr from 'plyr' causes an error the following console errors:

failed Building static HTML for pages - 4.800s

 ERROR #95312 

"document" is not available during server side rendering.

See our docs page for more info on this error: https://gatsby.dev/debug-html

  WebpackError: ReferenceError: document is not defined

  - build-html.js:107 doBuildPages
    [my-project]/[gatsby]/dist/commands/build-html.js:107:24

  - build-html.js:121 async buildHTML
    [my-project]/[gatsby]/dist/commands/build-html.js:121:3

  - build.js:206 async build
    [my-project]/[gatsby]/dist/commands/build.js:206:5

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! my-project@0.0.1 build: `gatsby build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the my-project@0.0.1 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/my-user/.npm/_logs/2020-07-23T19_42_18_866Z-debug.log

[KornelijusGlinskas]

Gatsby uses SSR so it needs an extra tweak to make it work.

Here is the article which will help you with that: https://chaseohlson.com/plyr-gatsby-youtube-vimeo