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;

Lionellionello

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').

Fulbert

i am using react-stater-kit default configuration – Lionellionello

@AnilGupta I've updated my answer, please let me know if that works for you. – Fulbert

@AnilGupta Keep in mind that this has only been tested for the client, not the server side. I know that react-starter-kit is isomorphic so that is something you will need to consider. – Fulbert

i am still getting error [gist] (gist.github.com/anilGupta/31888417a0eb0fdad7bc) Error: Cannot find module 'jwplayer', please look at my gist and correct me , thanks – Lionellionello

Looks like that alias isn't resolving. What happens if you try to do: import jwplayer from '../src/components/VideoPage/lib/jwplayer.js' – Fulbert

Again it giving me error ReferenceError: window is not defined – Lionellionello

Are you sure it isn't being executed on the server, where window isn't globally defined? – Fulbert

This didn't work for me, i keep getting the error, jwplayer.default is not a function, i'm using ES6 and webpack so i guess it's trying to get the default export from jwplayer.js please what could be the fix for it? – Congelation

@DanielBarde Sounds like you're having issues converting AMD/CommonJS to an ES6 module. In this example, I was also using ES6. Might want to take a look at how the jwplayer.js file you're referencing is exporting itself. – Fulbert

does anybody has a repo example of using jwplayer with webpack? – Impassioned

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);
});

Dissertate