Error when rendering plyr server side

[mimse]

Expected behavior

Be able to use plyr with server-side rendering

Actual behavior

Get this error "navigator is not defined"

Environment

• Browser: nodejs
• Version: 8
• Operating System: macOS sierra
• Version: 3.2.4

Steps to reproduce

• Try to render plyr server side

[friday]

I'm not sure what "Be able to use plyr with server-side rendering" means. Isn't it the opposite behavior you want? Plyr detecting that the environment isn't client and returning some kind of dummy object with noop methods in order not to break the build?

It's likely that whichever framework/library you're using exposes the environment so you could conditionally opt out of initializing Plyr in the SSR phase.

If you're using React this should help you: https://reactjs.org/docs/react-dom.html#hydrate Also in this case https://github.com/xDae/react-plyr seems to handle this already (https://github.com/xDae/react-plyr/issues/1).

[ManBearTM]

@friday The issue referenced is still open and does not seem to solve the problem. Wrapping it in a no-ssr component will not help since this error does not occur when plyr is initialized, but instead as soon as the module is imported.

The error @mimse got is from this line in defaults.js. The problem is that the defaults object is created as soon as the plyr module is imported (which also happens server-side). There is also multiple cases in the support.js file, fx. here it creates DOM elements when imported. And the user agent is sniffed in multiple files as soon as they are imported (for example here in controls.js).

As I see it the issue is that Plyr is not a pure module. It should not cause functions to be executed on external dependencies (such as navigator and document) when importing and it certainly shouldn't create DOM elements just by importing the module.

Just to clarify on how to reproduce the issue, you don't need to create a react app or use any other framework. All you need to do is install plyr to node_modules, then run the following code in Node:

const Plyr = require('plyr')

The issue can be worked around by conditionally importing plyr using require (in componentDidMount for React), but this means we are missing out on the advantages of ES6 import syntax.

[friday]

Thanks for the clarification! I didn't realize that.

Plyr wasn't built to be modular to begin with, but rather converted. Wrapping defaults in a function should solve the module import issue (although it might be needed in more places).

Would that suffice for both of your needs, or do you also need to be able to initialize it?

[ManBearTM]

Yes, I think wrapping it in a function should do the trick, at least for the defaults. Not sure if that is possible for the other cases, but I’d be happy to take a stab at it in a PR?

[friday]

I'd say go for it, but @sampotts is the judge of that.

[sampotts]

Yeh go for it if it works 👍

[mimse]

@friday I have tested your #960 and it is working. Thank you for this.

[friday]

The PR was just released in v3.3.8