Difficulty with use in reactjs

I’m attempting to use videojs-ima as a plugin on top of the reactjs example found in the guides page. But It seems like videojs-ima really disagrees with being used in webpack.

I have an instance of the player on my page, but when I try to load the plugin using this.player.ima I get an error and no advertisement appears as expected

Error in question:

Uncaught TypeError: this.player.ima is not a function

Is there a way to implement this plugin with react?

This is the component I’m using, that I attempted to modify to use reactjs-ima

import React from 'react';
import videojs from 'video.js'
import 'videojs-ima'

export default class VideoPlayer extends React.Component {
  componentDidMount() {
    // instantiate Video.js
    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
      console.log('onPlayerReady', this)
      let options = {
          id: this.videoNode,
          adTagUrl: 'http://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=xml_vmap1&unviewed_position_start=1&cust_params=sample_ar%3Dpremidpostpod%26deployment%3Dgmf-js&cmsid=496&vid=short_onecue&correlator='
      }
      this.player.ima(options)
    });
  }

  // destroy player on unmount
  componentWillUnmount() {
    if (this.player) {
      this.player.dispose()
    }
  }

  // wrap the player in a div with a `data-vjs-player` attribute
  // so videojs won't create additional wrapper in the DOM
  // see https://github.com/videojs/video.js/pull/3856
  render() {
    return (
      <div>    
        <div data-vjs-player>
          <video ref={ node => this.videoNode = node } className="video-js"></video>
        </div>
      </div>
    )
  }
}

[jackson-sandland]

Same exact issue. Would really appreciate some insight into getting this to work. I’ve got all the required dependencies, but the player object does not have an ima key, and this results in the above error.

Was able to resolve this by including all the dependencies in the head of the app html doc. Not ideal, but at least it works. Here’s a working example using imports into the document head: https://codepen.io/anon/pen/MVejgR

[Kiro705]

Hi all,

I recently had trouble using the videojs-ima plugin using a webpack setup as well. Because of the difficulty we decided to update the readme with a guide for this implementation.

Please see this: https://github.com/googleads/videojs-ima#es6-imports

I will be closing the issue, but please feel free to reopen it if there are changes to the guide that should be made.