Proper way to implement jwplayer in react component using webpack (react-starter-kit)

Question

i am making VideoPlayer react component with jwpalyer and i am using webpack es6 for loading module webpack support npm module loading & there is no npm for jwplayer

so am trying to include jwplayer.js using es6 import but it giving me error ReferenceError: window is not defined

so any one can help me to properly setup jwplayer with webpack

  import React, { PropTypes, Component } from 'react';
  import $ from 'jquery';
  import Player from "./lib/jwplayer/jwplayer.js";
  import styles from './VideoPayer.css';
  import withStyles from '../../decorators/withStyles';
  import Link from '../Link';

  @withStyles(styles)
  class VideoPlayer extends Component {

    static propTypes = {
      className: PropTypes.string,
    };

    static defaultProps = {
      file: '',
      image: ''
    };

    constructor(props) {
      super(props);
      this.playerElement = document.getElementById('my-player');
    }


    componentDidMount() {
      if(this.props.file) {
        this.setupPlayer();
      }
    }

    componentDidUpdate() {
      if(this.props.file) {
        this.setupPlayer();
      }
    }

    componentWillUnmount() {
       Player().remove(this.playerElement);
    }

    setupPlayer() {
      if(Player(this.playerElement)) {
        Player(this.playerElement).remove();
      }

      Player(this.playerElement).setup({
        flashplayer: require('./lib/player/jwplayer.flash.swf'),
        file: this.props.file,
        image: this.props.image,
        width: '100%',
        height: '100%',
      });
    }

    render() {
      return (
        <div>
          <div id="my-player" className="video-player"></div>
        </div>
      )
    }
  }

export default VideoPlayer;

Answer 1

I think this is what you need to do:

1. Define window as external to the bundle so that references to it in other libraries are not mangled.
2. Expose a global variable jwplayer so that you can attach your key
3. (Optional) Create an alias to your jwplayer library

I've tested it and this configuration works for me, but only on the client and not on the server or isomorphically/universally.

webpack.config.js:

// Declare window as external
externals: {
    'window': 'Window'
},
// Create an easy binding so we can just import or require 'jwplayer'
resolve: {
    alias: {
        'jwplayer':'../path/to/jwplayer.js'
    }
},
// Expose jwplayer as a global variable so we can attach the key, etc.
module: {
    loaders: [
        { test: /jwplayer.js$/, loader: 'expose?jwplayer' }
    ]
}

Then you can import jwplayer from 'jwplayer' and require('jwplayer').

Answer 2

Probably an old question but I recently found a relatively stable solution.

I include the jwplayer in a folder called app/thirdparty/jwplayer-7.7.4. Next, add it to the exclude in the babel loader so it is not parsed.

{
  test: /\.jsx?$/,
  use: 'babel-loader',
  exclude: /(node_modules|thirdparty)/,
}

I then use dynamic import in order to bootstrap my component and load jwplayer.

async function bootstrap(Component: React.Element<*>) {
  const target = document.getElementById('root');
  const { render } = await import('react-dom');
  render(<Component />, target);
}

Promise.all([
  import('app/components/Root'),
  import('app/thirdparty/jwplayer-7.7.4/jwplayer.js'),
]).then(([ { default: Root } ]) => {
  window.jwplayer.key = "<your key>";
  bootstrap(Root);
});