Search code examples
javascriptwebpackvideo.jswebpack-2

Using video.js library with Webpack's ProvidePlugin

I'm trying to upgrade Webpack from version 1 to version 3 in an application that uses the video.js library, and I want to expose videojs as a global variable to my scripts.

In my webpack.config.js file, in my plugins section, I have this:

plugins: [
  new webpack.ProvidePlugin({
    videojs: 'video.js'
  })
]

Now, as an example, if I want to use the registerPlugin function, I have to do something like this (because videojs.registerPlugin is undefined):

videojs.default.registerPlugin(...);

I don't understand why I need to include default here!

I tried to use the array syntax:

plugins: [
  new webpack.ProvidePlugin({
    videojs: ['video.js', 'videojs']
  })
]

But now my videojs global variable is undefined.

In the current application, I have the first syntax for the ProvidePlugin, and videojs variable is available globally, but I don't understand what's different in Webpack version 3. What am I missing here?

Any help is appreciated, Thank you

Solution

  • So, I found out how to solve the problem. The clue that I got is from the fact that I need to access the registerPlugin through the default property. So, in webpack.config.js, I can provide exactly that:

    plugins: [
  new webpack.ProvidePlugin({
    videojs: ['video.js', 'default']
  })
]

    now, I can access videojs.registerPlugin function directly :)