0

I am trying to use video.js via webpack.

I installed video.js via npm - npm install video.js --save-dev

In webpack I read that video.js should be loaded via script loader else it throws an error.

This is how I am loading video.js through the babel loader

module: 
   loaders: [
      {
                test: /video\.js/,
                loader: 'script'
      }
   ]

I got this solution from here https://github.com/videojs/video.js/issues/2750

This is my import statement

import videojs from 'video.js';

The issue that I now face is the import is returning an empty object, so when I try to do this: 

var vidTag = ReactDOM.findDOMNode(this.refs.html5Video);

this.videojs = videojs(vidTag);

I get this error:

renderer-0.js:8031 Uncaught (in promise) TypeError: (0 , _video2.default) is not a function(…)

Any help will be much appreciated. I am new to ES6 / React / Webpack

Cœur
  • 37,241
  • 25
  • 195
  • 267
alyn000r
  • 546
  • 2
  • 8
  • 19

2 Answers2

3

Please take a look at the loader's README before copy&pasting some random code. The script-loader is not appropiate here, because it imports scripts into the global scope while skipping the whole module system.

So, if you wanted to use the script-loader, you would just write:

import "script-loader!video.js";

console.log(videojs); // should be an object now

Usually I would not recommend the use of the script-loader because it neglects the whole point of a module system where you import stuff explicitly into the local scope. In the example above, the import happens as a side-effect into the global scope which is effectively the same as just using a <script> tag with all its downsides like name clashes, etc.

There are often better alternatives to it, like the exports-loader, which appends a module.exports at the end of the module, thus turning an old-school global script into a CommonJS module.

In this particular case, however, you don't need a loader at all because video.js is already aware of a CommonJS module system. Just write import videojs from "video.js";.

There is another minor problem, however. If you compile this with webpack, it will print a warning to the console:

WARNING in ../~/video.js/dist/video.js
Critical dependencies:
13:480-487 This seems to be a pre-built javascript file. Though this is possible, it's not recommended. Try to require the original source to get better results.
 @ ../~/video.js/dist/video.js 13:480-487

This is because webpack detects that this file has already been bundled somehow. Often it's better to include the actual src with all its tiny modules instead of one large dist because this way webpack is able to optimize the bundle in a better way. I've written down an exhaustive explanation about how to import legacy scripts with webpack.

Unfortunately, video.js does not include its src in the version deployed at npm, so you're forced to use the dist. In order to get rid of the error message and to improve webpack's build time, you can instruct webpack to skip video.js when parsing the code for require() statements by setting the module.noParse option in your webpack.config.js:

    module: {
        noParse: [
            /node_modules[\\/]video\.js/
        ]
    }

Usually it's safe to flag all pre-bundled modules (typically those with a dist folder) as noParse because they are already self-contained.

Community
  • 1
  • 1
Johannes Ewald
  • 17,665
  • 5
  • 44
  • 39
  • Thank you for your answer the issue that I face when doing import videojs from "video.js", was that it says cannot assign vttjs to undefined. Which is mentioned in the github issue i pasted above. Will the no parse property take care of that ? – alyn000r Jul 15 '16 at 14:17
  • Nope. But I've tested my solution with the latest version of videojs and it worked. So, if the error is still there, you need to provide an example. – Johannes Ewald Jul 18 '16 at 08:34
  • Should be: `noParse: [ /node_modules(\\|\/)video\.js/ ]` , FYI - using `noParse` will not work together with the `expose` plugin. – Adam Tal Aug 07 '16 at 08:03
  • I was using script-loader but this seems like a cleaner solution, thanks! – PabloRosales Sep 02 '16 at 22:00
0

include SDN

<script src="//vjs.zencdn.net/5.11/video.min.js"></script>

webpack config:

config.externals = {
    'video.js': 'videojs'
};
Сергей Савин
  • 31
  • 2