Play button doesn't work with video.js 6.2.0 and webpack #149

alsar · 2017-05-17T11:06:23Z

Description

Playing the recorded video doesn't work with video.js ~~6.0.0~~ ~6.2.0
When you record a video and then press the play button noting happens.

Steps to reproduce

Install video.js ~6.2.0

Results

Expected

Should play the video.

Error output

Uncaught TypeError: videojs.getComponent is not a function

Additional Information

versions

videojs

what version of videojs does this occur with?
video.js 6.2.0
videojs-record 1.6.1

browsers

what browser are affected?
Tested in Firefox and Chrome

OSes

what platforms (operating systems and devices) are affected?
Linux

The text was updated successfully, but these errors were encountered:

thijstriemstra · 2017-05-23T16:28:01Z

Confirmed it's an issue (tested with videojs 6.1.0). Also looks like CSS is screwed:

thijstriemstra · 2017-06-16T23:49:25Z

It works in Firefox (53) now but not in Chrome (60), closed this too soon (only worked around css issues).

thijstriemstra · 2017-06-17T01:00:17Z

@alsar can you confirm it's working now with the latest master and video.js 6.2.0 or newer?

alsar · 2017-06-17T06:30:58Z

@thijstriemstra With 6.2.0 i get an Uncaught TypeError: videojs.getComponent is not a functionerror.

alsar · 2017-06-17T06:41:35Z

With 6.1.0 it works now in both Firefox and Chrome.

thijstriemstra · 2017-06-17T12:23:51Z

@alsar really, it works with 6.1.0 but not with 6.2.0?

alsar · 2017-06-17T14:09:15Z

Yes, is looks that way.

thijstriemstra · 2017-06-17T20:57:54Z

what os/version of firefox/chrome? I can't reproduce that..

alsar · 2017-06-18T08:40:58Z

Linux with Firefox 54 and Chromium 58. Maybe it's an Webpack problem.
I'll investigate in the next days and get back to you.

perminder-klair · 2017-06-18T11:35:00Z

Getting same issue with

    "video.js": "^6.1.0",
    "videojs-record": "^1.6.2"

TypeError: videojs.getComponent is not a function

Just tested, it works if I use video.js like: "video.js": "6.1.0",

thijstriemstra · 2017-06-18T18:23:33Z

What line does this error occur on? Can someone post a screenshot or stacktrace? (with unminified versions)

thijstriemstra · 2017-06-18T18:27:03Z

This fix in a different plugin could be related: videojs/videojs-youtube@ad7275c#diff-41489607c076711cf7440b328fb7a065R37.

thijstriemstra · 2017-06-25T16:59:03Z

Also tested on OSX with Chrome 60.0.3112.40, still cannot reproduce.

alsar · 2017-06-30T12:49:57Z

@thijstriemstra I could get down to the root of the problem.
The problem is the combination of ES6 exports export default videojs and requirejs imports require('video.js)

video.js switched from module.exports = videojs in 6.1.0 to export default videojs in 6.2.0
And while videojs-record still uses require('video.js) and if you use ES6 stops working.

https://github.com/videojs/video.js/blob/v6.1.0/src/js/video.js#L727
https://github.com/videojs/video.js/blob/v6.2.0/src/js/video.js#L726

So the fix to this is as I understand it to switch to ES6 imports or to change the require to require('video.js).default

But I'm not really an expert regarding this subject.

Explanations of this problem:
videojs/video.js#2698 (comment)
https://medium.com/@kentcdodds/misunderstanding-es6-modules-upgrading-babel-tears-and-a-solution-ad2d5ab93ce0

thijstriemstra · 2017-07-03T11:32:53Z

Thanks for the research @alsar! There's also a webpack guide now but that doesn't mention anything related: https://github.com/videojs/video.js/blob/master/docs/guides/webpack.md

Hmm, @gkatsev should we use require('video.js).default as suggested in order to support both versions of video.js?

thijstriemstra · 2017-07-03T22:46:46Z

@alsar I assume you (will) have the same issue with https://github.com/collab-project/videojs-wavesurfer when recording audio-only?

gkatsev · 2017-07-03T23:56:42Z

Hm... when making the changes in 6.2.0 I tested to make sure that it works without requiring es6: https://github.com/videojs/videojs-bundler-sample
Maybe the issue is that this is a separate project that requires videojs and not an end-user which is what the bundler-sample project is?

gkatsev · 2017-07-04T00:01:18Z

Though, thinking about it some more, what version of webpack is used? We're outputting both CJS and ESM outputs and specify a main and a module property in the config. If webpack 2 is used, it probably tries to load the ESM module and things break.

thijstriemstra · 2017-07-04T00:15:11Z

Maybe the issue is that this is a separate project that requires videojs and not an end-user which is what the bundler-sample project is?

This sounds confusing to me, can you elaborate?

If webpack 2 is used, it probably tries to load the ESM module and things break.

@alsar what version are you using?

thijstriemstra · 2017-07-04T00:24:30Z

A new release of this plugin (in short term) would pin video.js to anything < 6.2.0.

gkatsev · 2017-07-04T00:24:41Z

Actually, I think it's exactly module field issue. Just remembered I had to do: https://github.com/videojs/videojs-bundler-sample/blob/master/src-es5/webpack.config.js#L9-L11
We probably should document that in the webpack guide.

Maybe the issue is that this is a separate project that requires videojs and not an end-user which is what the bundler-sample project is?
This sounds confusing, can you elaborate?

What I meant is that in videojs-bundler-sample, we require video.js directly in that project and we don't have a dependency also require video.js.

It sounds to me like if any module isn't using ESM, things could cause an issue. :(

thijstriemstra · 2017-07-04T00:26:36Z

It sounds to me like if any module isn't using ESM, things could cause an issue. :(

wtf is ESM. sorry.

gkatsev · 2017-07-04T00:27:57Z

it's ok. ESM is short for ES modules or Ecmascript modules. That is the import and export syntax. CJS is commonjs, i.e., what nodejs uses and what bundlers used to use.

alsar · 2017-07-04T07:36:18Z

I'm using Webpack 3 now. Had the same problem with version 2.

Webpack with ES6 by default uses video.es.js.
I solved the problem temporarily by aliasing video.js with node_modules/video.js/dist/video.js which doesn't use the ES6 syntax. But that is not really a proper fix.

thijstriemstra · 2017-07-08T19:20:36Z

I will:

open a new ticket for video.js: module.exports issue since 6.2.0 videojs/video.js#4580 (maybe related: Using webpack with videojs-contrib-hls v5.8.0 is not working ? videojs/video.js#4472)
pin video.js to < 6.2.0 (e69b9be)
and release a new version of this plugin.

… resolved (#149)

thijstriemstra · 2017-07-08T19:34:27Z

I'm using Webpack 3 now. Had the same problem with version 2.

video.js will be using webpack 3.1.0 soon it looks like (when this travis build succeeds I suppose): videojs/video.js#4470

thijstriemstra · 2017-08-21T12:59:09Z

I opened videojs/video.js#4580 cc @gkatsev

thijstriemstra · 2017-09-01T01:33:09Z

They committed a fix at videojs/video.js@5e23048. You can give that a try @alsar or wait till they release it.

alsar · 2017-09-04T14:17:43Z

I tested it quickly with the newsest video.js release that ships with the fix.

    "video.js": "6.2.8",
    "videojs-record": "1.7.0",

but I get an error with webpack Error: plugin "record" does not exist (also with other plugins). I currently don't have the time to debug it in the next days, but it's definitely a ES6 issue and also maybe isn't related to the fix. Because I don't get any error with video.js/dist/video.js.

thijstriemstra · 2017-09-05T00:29:32Z

@gkatsev any idea?

thijstriemstra · 2017-09-11T18:11:54Z

@perminder-klair can you give it a try with 6.2.8 or newer?

gavfu · 2017-09-18T13:50:08Z

I got the same "Error: plugin 'record' does not exist" with video.js 6.2.8 and videojs-record 1.7.0.

I tried to low versions of video.js and videojs-record, but still get the same error. Do you guys know any workaround to make it workable for now? Thanks.

thijstriemstra · 2017-09-18T13:53:56Z

@gavfu you tried video.js 6.1.0?

gavfu · 2017-09-18T13:59:20Z

@thijstriemstra �yes，I'm trying to use it in an electron app, with webpack 2.2.1。
I even tried video.js 5.19.0 with following configurations in package.json, but still got the error.

"video.js": "5.19.0",
"videojs-record": "1.6.0"

thijstriemstra · 2017-09-18T14:09:37Z

@gavfu have you tried an older version of webpack, e.g. 1.x.x? I'm currently refactoring the plugins to ES6 and webpack build so this should get fixed eventually.

gavfu · 2017-09-18T14:20:57Z

@thijstriemstra Not yet, webpack 1.x is deprecated so I'd rather not to downgrade to it. May I know roughly when will the new version plugin be released? Meanwhile, if there are any workable combinations of video.js + videojs-record found, I'm willing to try that...

thijstriemstra · 2017-09-18T14:21:45Z

Without webpack it works fine so your only option is to downgrade for now I think.

gavfu · 2017-09-18T14:24:20Z

I'll try and see, thanks thijstriemstra. :)

alsar · 2017-09-18T14:56:42Z

@gavfu You can alias video.js to use the non-ES6 version.

Use something like this in your webpack config:

  resolve: {
    alias: {
      'video.js': path.resolve(__dirname, '../../node_modules/video.js/dist/video.js')
    }
  }

This is a quick workaround until this issue is resolved.

thijstriemstra · 2017-09-19T01:16:58Z

Also see #167 for v2.0 (with better build system/ES6 etc) that will also resolve this ticket.

- (videojs-)wavesurfer >= 2.0 (only) support - video.js >= 6.0 (only) support - new build system (using babel/browserify, with tests for webpack, fixes #149) - modules/es6 (fixes #167) - advanced video.js plugin - support for the video.js fluid option (fixes #166) - React example (fixes #171) - replace usage of URL.createObjectURL(stream) (fixes #169)

thijstriemstra · 2017-10-03T15:22:05Z

@alsar @gavfu @perminder-klair 2.0.0 PR was merged to master branch (containing a fix for this ticket), any help testing before I release 2.0.0 would be appreciated!

12smc120 · 2018-09-04T09:13:04Z

@thijstriemstra
I'm getting an error
Error: plugin "record" does not exist

Please tell me some solution for this.

thijstriemstra added the bug label May 27, 2017

thijstriemstra closed this as completed in 6113a32 Jun 16, 2017

thijstriemstra reopened this Jun 16, 2017

thijstriemstra closed this as completed in 698f126 Jun 17, 2017

thijstriemstra reopened this Jun 18, 2017

thijstriemstra changed the title ~~Play button doesn't work with video.js 6.0~~ Play button doesn't work with video.js 6.2.0 Jul 3, 2017

thijstriemstra changed the title ~~Play button doesn't work with video.js 6.2.0~~ Play button doesn't work with video.js 6.2.0 and webpack Jul 3, 2017

thijstriemstra added a commit that referenced this issue Jul 8, 2017

exclude video.js 6.2.0 or newer until video.js module export issue is…

e69b9be

… resolved (#149)

thijstriemstra mentioned this issue Aug 21, 2017

module.exports issue since 6.2.0 videojs/video.js#4580

Closed

thijstriemstra mentioned this issue Sep 27, 2017

Modernize plugin (v2.0) #170

Merged

thijstriemstra added this to the 2.0.0 milestone Oct 3, 2017

thijstriemstra closed this as completed in #170 Oct 3, 2017

collab-project locked as resolved and limited conversation to collaborators Sep 4, 2018

Play button doesn't work with video.js 6.2.0 and webpack #149

Play button doesn't work with video.js 6.2.0 and webpack #149

Comments

alsar commented May 17, 2017 • edited by thijstriemstra Loading

Description

Steps to reproduce

Results

Expected

Error output

Additional Information

versions

videojs

browsers

OSes

thijstriemstra commented May 23, 2017 • edited Loading

thijstriemstra commented Jun 16, 2017 • edited Loading

thijstriemstra commented Jun 17, 2017 • edited Loading

alsar commented Jun 17, 2017

alsar commented Jun 17, 2017

thijstriemstra commented Jun 17, 2017

alsar commented Jun 17, 2017

thijstriemstra commented Jun 17, 2017

alsar commented Jun 18, 2017 • edited Loading

perminder-klair commented Jun 18, 2017 • edited Loading

thijstriemstra commented Jun 18, 2017

thijstriemstra commented Jun 18, 2017

thijstriemstra commented Jun 25, 2017

alsar commented Jun 30, 2017 • edited Loading

thijstriemstra commented Jul 3, 2017 • edited Loading

thijstriemstra commented Jul 3, 2017 • edited Loading

gkatsev commented Jul 3, 2017

gkatsev commented Jul 4, 2017

thijstriemstra commented Jul 4, 2017 • edited Loading

thijstriemstra commented Jul 4, 2017

gkatsev commented Jul 4, 2017

thijstriemstra commented Jul 4, 2017

gkatsev commented Jul 4, 2017

alsar commented Jul 4, 2017

thijstriemstra commented Jul 8, 2017 • edited Loading

thijstriemstra commented Jul 8, 2017

thijstriemstra commented Aug 21, 2017

thijstriemstra commented Sep 1, 2017

alsar commented Sep 4, 2017

thijstriemstra commented Sep 5, 2017

thijstriemstra commented Sep 11, 2017

gavfu commented Sep 18, 2017

thijstriemstra commented Sep 18, 2017

gavfu commented Sep 18, 2017

thijstriemstra commented Sep 18, 2017

gavfu commented Sep 18, 2017

thijstriemstra commented Sep 18, 2017

gavfu commented Sep 18, 2017

alsar commented Sep 18, 2017

thijstriemstra commented Sep 19, 2017 • edited Loading

thijstriemstra commented Oct 3, 2017 • edited Loading

12smc120 commented Sep 4, 2018

alsar commented May 17, 2017 •

edited by thijstriemstra

Loading

thijstriemstra commented May 23, 2017 •

edited

Loading

thijstriemstra commented Jun 16, 2017 •

edited

Loading

thijstriemstra commented Jun 17, 2017 •

edited

Loading

alsar commented Jun 18, 2017 •

edited

Loading

perminder-klair commented Jun 18, 2017 •

edited

Loading

alsar commented Jun 30, 2017 •

edited

Loading

thijstriemstra commented Jul 3, 2017 •

edited

Loading

thijstriemstra commented Jul 3, 2017 •

edited

Loading

thijstriemstra commented Jul 4, 2017 •

edited

Loading

thijstriemstra commented Jul 8, 2017 •

edited

Loading

thijstriemstra commented Sep 19, 2017 •

edited

Loading

thijstriemstra commented Oct 3, 2017 •

edited

Loading