plyr

plyr copied to clipboard

The Plyr module cannot be imported in Node.js, because it depends on document. This is an issue for server-side rendering used by some static site generators (see downstream bug) and is a regression of #935 .

I believe the issue is related to utils/browser.js. When SSR worked in v3.3.8, the browser discovery was performed at runtime, when calling getBrowser. In recent versions, the browser type is evaluated at import time and makes use of document and ẁindow.

Steps to reproduce

Using plyr-3.6.2:

• Create an app.mjs with an import statement for plyr.min.mjs:

import 'plyr/dist/plyr.min.mjs';

• Run the file:

$ node app.mjs

Expected behaviour

Plyr can be imported successfully

Actual behaviour

Node exits with the following error:

ReferenceError: document is not defined
    at file:///tmp/plyr-test/node_modules/plyr/dist/plyr.min.mjs:1:10106
    at file:///tmp/plyr-test/node_modules/plyr/dist/plyr.min.mjs:1:10375
    at ModuleJob.run (internal/modules/esm/module_job.js:138:23)
    at async Loader.import (internal/modules/esm/loader.js:178:24)

Environment

• Browser: Node.js
• Version: 14.4.0
• Operating System: Linux

Assuming you are doing this with react and webpack, as a workaround you can require instead of import the library in a useEffect which makes sure the plyr code only runs on the browser.

useEffect(() => {
  const Plyr = require('plyr');
  new Plyr(videoRef.current, options);    
}, []) 

This occurs too with vite. When will this be fixed?