"Error: Cannot find module 'videojs'" when bundling using ES6/Babel and VideoJS 5

[gpmcadamold]

I'm currently trying to compile ES6 using Babel and Browserify. The VideoJS blog post suggests something like this should work:

import videojs from 'video.js';
import 'videojs-youtube';

However I'm getting the following error during bundling:

[00:36:38] Browserify Error { [Error: Cannot find module 'videojs' from '/Users/path/to/my/node_modules/videojs-youtube/dist']

Is the VideoJS YouTube plugin compatible with ES6/Babel in the way suggested by the VideoJS blog post?

[ItsBenCodes]

Update to 2.0.6 and it should work fine. The require was on videojs instead of video.js. My bad.

Let me know if it works for you!

[gpmcadamold]

Fantastic, 2.0.6 resolves this issue for me! Thanks for the hard work on this project and for responding so quickly to my issue report 😄

[Fireworks]

@exon Possibly related, but I can't get it to build either using this same import structure:

ERROR in ./~/videojs-youtube/dist/Youtube.js                                                          
Module not found: Error: Cannot resolve module 'videojs' in ...node_m
odules/videojs-youtube/dist                                                                           
 @ ./~/videojs-youtube/dist/Youtube.js 25:4-27:6                                                      

Building with webpack, on 2.0.7

[ItsBenCodes]

@Fireworks Are you using RequireJS or CommonJS? I think I forgot to fix it for RequireJS

[Fireworks]

@exon Webpack, which can handle CommonJS fine, so not sure where it's getting caught up.

[gpmcadamold]

I've since moved to webpack and have the same issue now. The reason being it seems that webpack can't find a module named videojs, instead it needs to be named video.js.

@Fireworks Did you ever figure out what was going on here? Is it an issue with videojs-youtube or a webpack configuration issue?

[Fireworks]

@gpmcadam No, I poked around for a bit, but ultimately didn't have time to investigate so I am just using YouTube embedding instead at the moment.

[ItsBenCodes]

@gpmcadam Try to upgrade to the last version (remove the node_modules/vjs-youtube folder). It has been fixed in a previous version. Let me know if it works

[nhanb]

I'm using Webpack too and can confirm that it doesn't work with videojs-youtube@2.0.7.

My imports:

import videojs from 'video.js';
import 'videojs-youtube';

Error message:

ERROR in ./~/videojs-youtube/dist/Youtube.js
Module not found: Error: Cannot resolve module 'videojs' in /[...]/node_modules/videojs-youtube/dist
 @ ./~/videojs-youtube/dist/Youtube.js 25:4-27:6

[nhanb]

So apparently after webpack does its dependency wiring magic, node_modules/videojs-youtube/dist/Youtube.js looks like this:

/*global define, YT*/
(function (root, factory) {
  if(typeof define === 'function' && define.amd) {
    define(['videojs'], function(videojs){
      return (root.Youtube = factory(videojs));
    });
  } else if(typeof module === 'object' && module.exports) {
    module.exports = (root.Youtube = factory(require('video.js')));
  } else {
    root.Youtube = factory(root.videojs);
  }
}(this, function(videojs) { [...] }

So I thought Webpack might be importing videojs-youtube as an AMD module, not a CommonJS one, which explains why it worked in Browserify but not Webpack. So I tried explicitly disabling AMD, and it did import without error:

require('imports?define=>false!videojs-youtube');

---

UPDATE: Before someone tries using VideoJS with React (like me), note that it's far from trivial and you might want to look elsewhere: videojs/video.js#2006 . I think I'll give up VJS for now.

[ItsBenCodes]

This has been fixed in the last revision