New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for webpack? #600

Closed
hanfeisun opened this Issue Mar 15, 2016 · 107 comments

Comments

Projects
None yet
@hanfeisun

hanfeisun commented Mar 15, 2016

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

This comment has been minimized.

Member

dmlap commented Mar 17, 2016

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

This comment has been minimized.

samward1985 commented Mar 25, 2016

+1

Going to try building contrib-hls myself now.

@samward1985

This comment has been minimized.

samward1985 commented Mar 25, 2016

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

@hanfeisun

This comment has been minimized.

hanfeisun commented Mar 26, 2016

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

@andrewmnlv

This comment has been minimized.

Contributor

andrewmnlv commented May 18, 2016

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

This comment has been minimized.

Member

gkatsev commented May 18, 2016

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

This comment has been minimized.

Contributor

andrewmnlv commented May 18, 2016

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

@gkatsev

This comment has been minimized.

Member

gkatsev commented May 19, 2016

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

This comment has been minimized.

Member

gkatsev commented Jun 5, 2016

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

This comment has been minimized.

Member

gkatsev commented Jun 8, 2016

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

This comment has been minimized.

ScottLNorvell commented Jun 30, 2016

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

This comment has been minimized.

nehakhandelwal commented Aug 9, 2016

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 comment has been minimized.

nehakhandelwal commented Aug 10, 2016

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

This comment has been minimized.

Ambroos commented Nov 4, 2016

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

This comment has been minimized.

Member

gkatsev commented Nov 4, 2016

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

This comment has been minimized.

Member

gkatsev commented Nov 4, 2016

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

@vpowers

This comment has been minimized.

vpowers commented Nov 15, 2016

@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

This comment has been minimized.

Ambroos commented Nov 15, 2016

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

@vpowers

This comment has been minimized.

vpowers commented Nov 15, 2016

@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

This comment has been minimized.

vpowers commented Nov 16, 2016

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

This comment has been minimized.

dbryand commented Nov 21, 2016

@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

This comment has been minimized.

vpowers commented Nov 22, 2016

@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

This comment has been minimized.

dbryand commented Nov 22, 2016

Yes, a home-rolled webpack config.

@vpowers

This comment has been minimized.

vpowers commented Nov 23, 2016

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

This comment has been minimized.

Collaborator

mjneil commented Feb 12, 2018

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

This comment has been minimized.

rparjun commented Feb 13, 2018

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

@forbesjo forbesjo referenced this issue Feb 16, 2018

Closed

feat: built-in HLS playback support #4961

1 of 10 tasks complete
@rparjun

This comment has been minimized.

rparjun commented Feb 17, 2018

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

@alexandrzavalii

This comment has been minimized.

alexandrzavalii commented Mar 5, 2018

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

@kapersoft

This comment has been minimized.

kapersoft commented Mar 5, 2018

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

@mjneil

This comment has been minimized.

Collaborator

mjneil commented Mar 8, 2018

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.

@mjneil mjneil closed this Mar 8, 2018

@rparjun

This comment has been minimized.

rparjun commented Mar 8, 2018

@mjneil Thanks 😄

@ffischetti

This comment has been minimized.

ffischetti commented Mar 14, 2018

@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

This comment has been minimized.

kapersoft commented Mar 14, 2018

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

@thecotne

This comment has been minimized.

thecotne commented Mar 14, 2018

@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

This comment has been minimized.

ffischetti commented Mar 14, 2018

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

This comment has been minimized.

thecotne commented Mar 14, 2018

@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

This comment has been minimized.

thecotne commented Mar 14, 2018

if you import like this

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

it should work (works for me)

@ffischetti

This comment has been minimized.

ffischetti commented Mar 14, 2018

@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

This comment has been minimized.

rparjun commented Mar 15, 2018

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

@ffischetti

This comment has been minimized.

ffischetti commented Mar 15, 2018

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

This comment has been minimized.

Collaborator

mjneil commented Mar 15, 2018

@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

This comment has been minimized.

Collaborator

mjneil commented Mar 15, 2018

@ffischetti this should be fixed in v5.14.0

@ffischetti

This comment has been minimized.

ffischetti commented Mar 16, 2018

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

@MosheAtOwal

This comment has been minimized.

MosheAtOwal commented Mar 19, 2018

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment