Farzad Farzad - 26 days ago 8
Javascript Question

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

Answer Source

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 :)