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;

Ngz · Answer 1 · 2016-01-12T05:50:47.120

6

I think this is what you need to do:

Define window as external to the bundle so that references to it in other libraries are not mangled.
Expose a global variable jwplayer so that you can attach your key
(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').

edited Jan 12 '16 at 05:50

answered Jan 12 '16 at 05:27

Ngz

180
6

i am using [react-stater-kit](https://github.com/kriasoft/react-starter-kit/blob/master/tools/webpack.config.js) default configuration – Anil Gupta Jan 12 '16 at 05:33
@AnilGupta I've updated my answer, please let me know if that works for you. – Ngz Jan 12 '16 at 05:44
1

@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. – Ngz Jan 12 '16 at 05:47
i am still getting error [gist] (https://gist.github.com/anilGupta/31888417a0eb0fdad7bc) Error: Cannot find module 'jwplayer', please look at my gist and correct me , thanks – Anil Gupta Jan 12 '16 at 10:45
Looks like that alias isn't resolving. What happens if you try to do: `import jwplayer from '../src/components/VideoPage/lib/jwplayer.js'` – Ngz Jan 14 '16 at 01:01
Again it giving me error ReferenceError: window is not defined – Anil Gupta Jan 14 '16 at 06:58
Are you sure it isn't being executed on the server, where window isn't globally defined? – Ngz Jan 15 '16 at 03:16
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? – Daniel Barde Sep 27 '16 at 11:35
@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. – Ngz Sep 29 '16 at 19:09
3

does anybody has a repo example of using jwplayer with webpack? – Sibelius Seraphini Nov 16 '16 at 09:36

score 1 · Answer 2 · answered May 05 '17 at 14:16

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

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

2 Answers2

webpack.config.js:

Linked