Support for webpack?

[hanfeisun]

In the version of 1.x videojs-contrib-hls, I can shim the package like this:

import vjs  from 'video.js';
window.videojs = vjs;

require('imports?this=>window!videojs-contrib-hls');

However, in 2.0.1 videojs-contrib-hls, this method doesn't work.

A dependency called webworkify will throw an error

Uncaught TypeError: Cannot convert undefined or null to object
module.exports  @   index.js:10
VirtualSourceBuffer @   virtual-source-buffer.js:66
addSourceBuffer @   html-media-source.js:168
setupSourceBuffer_  @   videojs-contrib-hls.js?./~/imports-loader?this=>window:621
handleSourceOpen    @   videojs-contrib-hls.js?./~/imports-loader?this=>window:532
data.dispatcher @   video.js:18626
trigger @   video.js:18730
EventTarget.trigger @   video.js:7950

Will videojs-contrib-hls plan to support webpack in the future?

[dmlap]

I think this was the issue behind videojs/mux.js#53. That was fixed in mux.js >= 2.0.1, which you should use if you build this project yourself (and in our next release when that happens). Do you see the same error if you build contrib-hls yourself?

[samward1985]

+1

Going to try building contrib-hls myself now.

[samward1985]

Eh - no luck... @hanfeisun did you find a solution?

[hanfeisun]

@samward1985 No, it doesn't work under Webpack now.. So I am still using videojs-contrib-hls 1.3.11..

[andrewmnlv]

Hello all!)
You can set alias for hls in webpack config. It works for me:
resolve: { alias: { 'videojs-contrib-hls': __dirname + '/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls' } }

videojs-contrib-hls v2.2.0

[gkatsev]

I think contrib-hls 2.2.0 won't require any aliases anymore. Though, unfortunately, that version also requires videojs 5.10.1 and up.

[andrewmnlv]

@gkatsev i have videojs v5.10.2, but webworkify breaks webpack build because of
no fallbacks for arguments

[gkatsev]

If webworkify is the only problem, we should consider swapping it out for another module with similar functionality that works in both webpack and browserify.

[gkatsev]

There seems to be a webworkify-webpack module which may work for webpack but it doesnt work for browserify. Someone should write a module that works for both.

[gkatsev]

After some thought and some discussion in babel's chatroom, it seems like the correct solution is to not rely on a packer transform or loader to the web worker inline but rather do it as a separate source transform. I saw https://github.com/mohayonao/inline-worker which may help but also maybe there's some babel plugin that allows us to do this.
Unfortunately, this is a low priority for us because there's more pressing specific issues and it can be worked around by using the dist file or maybe running webworkify-webpack over the code. If anyone is willing to submit a PR to fix this issue we'll definitely take a look and work with you to land it.
Thanks!

[ScottLNorvell]

I was having the same issue with webpack and contrib-hls. I was able to get it working by aliasing webworkify to webworkify-webpack in my webpack config like so:

// ...
resolve: {
  alias: {
    webworkify$: 'webworkify-webpack'
  }
},
// ...

The strange caveat is that I need point to version 1.0.6 in my package.json instead of the current version (which is 1.1ish). Got that little tidbit from a separate issue here

Hope this helps anyone!

[nehakhandelwal]

I am facing the same and added below code too.

resolve: {
alias:
{ 'videojs-contrib-hls': dirname + '/node_modules/videojs-contrib-hls/dist/videojs-contrib-hls',
webworkify$: 'webworkify-webpack'
}
},
and getting this error
19:31:03.939 TypeError: _videoJs2.default is undefined
[72]</<() bundle.js%20line%205005%20%3E%20eval:8312
[72]<() bundle.js%20line%205005%20%3E%20eval:7848
s() bundle.js%20line%205005%20%3E%20eval:7
s/<() bundle.js%20line%205005%20%3E%20eval:7
[71]</<() bundle.js%20line%205005%20%3E%20eval:7668
[71]<() bundle.js%20line%205005%20%3E%20eval:7640
s() bundle.js%20line%205005%20%3E%20eval:7
s/<() bundle.js%20line%205005%20%3E%20eval:7
[76]</<() bundle.js%20line%205005%20%3E%20eval:8886
[76]<() bundle.js%20line%205005%20%3E%20eval:8870
s() bundle.js%20line%205005%20%3E%20eval:7
s/<() bundle.js%20line%205005%20%3E%20eval:7
[94]</<() bundle.js%20line%205005%20%3E%20eval:14668
[94]<() bundle.js%20line%205005%20%3E%20eval:14627
s() bundle.js%20line%205005%20%3E%20eval:7
e() bundle.js%20line%205005%20%3E%20eval:7
bundle.js%20line%205005%20%3E%20eval:7
bundle.js%20line%205005%20%3E%20eval:7
bundle.js%20line%205005%20%3E%20eval:7
bundle.js%20line%205005%20%3E%20eval:1
bundle.js:5005
__webpack_require() bundle.js:556
hotCreateRequire/fn() bundle.js:87
bundle.js%20line%204993%20%3E%20eval:29
bundle.js%20line%204993%20%3E%20eval:1
bundle.js:4993
webpack_require() bundle.js:556
hotCreateRequire/fn() bundle.js:87
bundle.js%20line%204081%20%3E%20eval:21
bundle.js:4081
webpack_require() bundle.js:556
hotCreateRequire/fn() bundle.js:87
bundle.js%20line%20691%20%3E%20eval:19
bundle.js:691
webpack_require() bundle.js:556
hotCreateRequire/fn() bundle.js:87
bundle.js:588
webpack_require() bundle.js:556
bundle.js:579
bundle.js:1
1 bundle.js%20line%205005%20%3E%20eval:8312:1

[nehakhandelwal]

this is giving the error of
webworkify-webpack: Could not locate module containing worker function! Make sure you aren't using eval sourcemaps and that you pass named functions to webworkify-webpack!

[Ambroos]

If anyone else encounters this issue again (or a similar one) and wants to use videojs-contrib-hls with Webpack:

webworkify-webpack shims window to {}, which causes global/window to return the wrong context in a web worker, which in turn causes things to fail. I've created a fork of webworkify-webpack that's compatible with the original webworkify and works with videojs-contrib-hls!

Just add webworkify-webpack-dropin@^1.1.9 to your dependencies and add the following alias to your Webpack config:

resolve: {
  alias: {
    webworkify: 'webworkify-webpack-dropin',
  },
}

It's been tested on videojs-contrib-hls v3.7.0-beta3 and video.js 5.12.6.

[gkatsev]

Anyone know of a babel webworkify plugin? If we can inline the webworker at that point, we can easily support both webpack and browserify without extra work on the user's part

[gkatsev]

@Ambroos also, thanks for making the dropin replacement package, seems like it'll make things a lot simpler in the meantime.

[vpowers]

@Ambroos I've tried your solution and I'm getting an error thrown here in webworkify-webpack-dropin:

if (typeof key === 'undefined') {
        throw new Error('webworkify-webpack: Could not locate module containing worker function! Make sure you aren\'t using eval sourcemaps and that you pass named functions to webworkify-webpack!');
}

I've made sure that I'm not using eval sourcemaps.
I've upgraded my versions of videojs-contrib-hls and video.js to v3.7.0-beta3 and 5.12.6, respectively. The only difference is my project is a react app using nwb, if that makes any difference. Any ideas?

[Ambroos]

@vpowers Could you show me your webpack config? I can't really think of any reason for this error to appear.

[vpowers]

@Ambroos Here is my nwb.config.js. Webpack configuration is passed in:

module.exports = {
...
  webpack: {
    devtool: 'cheap-source-map',
    html: {
      favicon: 'vendors/favicon.ico'
    },
    extra: {
      resolve: {
        alias: {
          webworkify: 'webworkify-webpack-dropin'
        }
      }
    }
  }
}

Here is the line in virtual-source-buffer.js (es5) from videojs-contrib-media-sources that executes webworkify-webpack-dropin:

// append muxed segments to their respective native buffers as
// soon as they are available
this.transmuxer_ = (0, _webworkify2['default'])(_transmuxerWorker2['default']);

[vpowers]

I've attempted to isolate the issue by creating a small app using videojs-contrib-hls and bundling with webpack and @Ambroos 's solution does work. I had been testing this within a larger react app that uses nwb so somethings going on there. I'll provide an update if I can figure out the issue.

[dbryand]

@Ambroos's solution worked for me, but I had to turn off eval for source maps in my large react app, @vpowers. (edit: I see now that you're using cheap-source-map, so that probably won't help you)

[vpowers]

@dbryand My react app is using nwb for bundling instead of plain webpack. (nwb uses webpack under the hood). This seems to be the difference. Are you just using webpack?

[dbryand]

Yes, a home-rolled webpack config.

[vpowers]

I've created two small applications. One using webpack and video.js with hls plugin and a react app using nwb (https://github.com/insin/nwb) and video.js with hls plugin. Both of them are swapping out the webworkify module with @Ambroos's webworkify-webpack-dropin module. The webpack app is working with this solution but the react app using nwb is not. If anyone has any experience with nwb or is feeling helpful, take a look at these projects. Any help would be appreciated!

https://github.com/vpowers/simple-react-app
https://github.com/vpowers/simple-webpack-app

[mjneil]

Has anyone been able to give the build in my previous comment a try? Would really appreciate any feedback on whether it works in any of your custom builds or what breaks.
Pinging a few people that have been active recently @rparjun @MCDELTAT @AndrewKirkovski @brainthinks @jide @gregorskii

[rparjun]

@mjneil Thanks 😃
I will take a look into it this weekend and let you know.

[rparjun]

Hi @mjneil , videojs-contrib-hls@qa is working fine. I was able to verify it with multiple streams, all looks good. 🎉

[alexandrzavalii]

@mjneil
Big thanks!
Tested thoroughly , all works
Finally we have a clean solution!

[kapersoft]

@mjneil I have tested it with a Laravel Mix / VueJS setup and it works like a charm! Thanks 😃

[mjneil]

Thank you @rparjun @alexandrzavalii and @kapersoft for testing it out and confirming it works. v5.13.0 of videojs-contrib-hls has been released that include these fixes! Anyone looking to support webpack should upgrade to 5.13.0 and should be able to include the project without extra webpack configuration.

I am closing this issue as resolved. Please reopen the issue or create a new one if you experience any issues after updating.

[rparjun]

@mjneil Thanks 😄

[ffischetti]

@mjneil thanks for the awesome effort. FYI, with v5.13.0 I'm still getting the unexpected identifier issue Anyone else have that problem?

[kapersoft]

@ffischetti I have tested v5.13.0 with my Laravel Mix / VueJS setup and didn't experience any problems.

[thecotne]

@ffischetti do you import videojs-contrib-hls/dist/videojs-contrib-hls.min or videojs-contrib-hls ?

i have webpack + react + videojs + videojs-contrib-hls and with latest version everything works fine

do you still have any "hacks" left maybe?

[ffischetti]

Thanks @thecotne

I'm doing: import 'videojs-contrib-hls,' as when I try to import videojs-contrib-hls/dist/videojs-contrib-hls.min, I get the following error: videojs-contrib-hls.min.js:2 Uncaught TypeError: Cannot read property 'EventTarget' of undefined

https://github.com/Peer5/videojs-contrib-hls.js works fine. But video-js-contrib-hls throws the unexpected token '{' error.

FYI, the app is bootstrapped with create-react-app.

[thecotne]

@ffischetti videojs-contrib-hls.js is completely different package and what i am saying is that this package videojs-contrib-hls works for me and maybe you are doing something wrong

[thecotne]

if you import like this

import 'videojs-contrib-hls'
import videojs from 'video.js'

it should work (works for me)

[ffischetti]

@thecotne I'm doing exactly that and it throws the error. I'm aware that videojs-contrib-hls.js is a different package. I trying to point out that I seem to be experiencing the same state the others did prior to the fix.

I appreciate the help and it's totally possible I'm doing something wrong. However, I suspect that some other dependency or action might be necessary to get v5.13.0 working with create-react-app, and that just hasn't been made explicit.

Out of curiosity, does anyone have this working with create-react-app? If so, please share any details. They'd be much appreciated. Thanks in advance!

[rparjun]

@ffischetti I can take a look into this if you can share a repo where i can reproduce this issue.

[ffischetti]

Hi @rparjun,

Thanks for the kind offer. I've created a very basic app that will allow you to reproduce the issue:
sample app.

Please let me knows if this helps or not. Thanks!

[mjneil]

@ffischetti it looks like its the way react activates the css-loader is causing issues, its using the inline with json object options method. Looks like the keys of that json options object have " that are not being escaped by webwackify. I'll get started on a fix, it doesn't look like it'll be too difficult

[mjneil]

@ffischetti this should be fixed in v5.14.0

[ffischetti]

Confirmed it's working. You rock. Thanks @mjneil !

[MosheAtOwal]

Worked for me too, with Webpack (2!) and VueJS.