React Server Rendering Errors

I’m trying to import this library into a React component which gets server rendered first then registers client side after. So essentially i need the same React component to work in the browser and in Node. This is causing issues in Node because i get Error: Sorry, the Vimeo Player API is not available in this browser..

Expected Behavior

The Javascript API should allow Node as a browser for some behavior. Even if the API does not support many functions in Node, the API should still allow you to at least import it without errors.

Actual Behavior

When trying to import this library server side in Node I get Error: Sorry, the Vimeo Player API is not available in this browser.

Steps to Reproduce

Import in any file server side.

[dbismut]

It looks like import Vimeo from '@vimeo/player' triggers a function calling the window element.

The only way I could make this work was to use require instead of import, and call require after the component has been mounted.

As in:

componentDidMount: function() {
  const VimeoPlayer = require('@vimeo/player');
  const player = new VimeoPlayer(this.refs.iframe);
  player.on('play', function() {
    console.log('played the video!');
  });
}

[randallb]

Is this still desired? I’d be happy to factor out a function to check the page for vimeo elements which would only run if typeof window !== 'undefined' or some other equiv check.