ima is not a function when i trying to use ima plugin with webpack project

Hi all, a have big problem with using this plugin in my project. Libs:

video.js: v7.1.0
videojs-ima: v1.5.1

Code:

import videojs from 'videojs';
import 'videojs-ima';

class TestIMA {
     constructor() {}
     test() {
          const player = videojs(document.querySelector('.videojs-test'));
          player.ready(() => {
               player.ima({
                    id: 'video_story_item',
                    adTagUrl: '...'
               });
          });
     }
}

const testIMA = new TestIMA();
testIMA.test();

And i’m getting error ima is not a function

[chadladensack]

After many late night hours I as finally able to configure webpack to import the dang module and expose the init method of the ImaPlugin. It’s a shim that forces the module to call registerPlugin against a temp var that holds the ImaPlugin init function. The exports loader exposes the temp var as a module default so we can snag the init method and register the plugin against the proper videojs instance.

webpack.config

module: {
  rules: [
    {
      // omg, WHY!?!?!1!
      test: /videojs.ima.js$/,
      use: [
        {
          loader: 'imports-loader',
          options: {
            define: ">false",
            exports: ">false",
            holder: ">{name:null, init:null}",
            this: ">{videojs:{registerPlugin:(name,init) => {holder.name = name; holder.init = init;}}}",
          }
        },
        {loader: 'exports-loader', options: "holder"},
      ]
    },
  ]
}

my_code_file.js

import videojs from "video.js";
require('videojs-contrib-ads');

let ima = require('videojs-ima/dist/videojs.ima');
videojs.registerPlugin(ima.name, ima.init);

I believe the issue is how webpack isolates each module. If you perform a standard import of the videojs-ima plugin all appears to be okay but the videojs instance the plugin initializes against is different than the one you’re working on.

Dear hard working Google devs, for the love of god, export the ImaPlugin. It would be even cooler if you could update your bundle process to create a true ES6 module in the dist 😃

[Kiro705]

Hi all,

It looks as though the issue has been resolved. Please see our import guide if you are using webpack for your app.