Webpack problem - Cannot resolve module 'videojs'

Description

I am using webpack with babel es2015 loader and getting a compile error due to the AMD import in videojs.record.js.

Seems to be related to #123.

Steps to reproduce

(after installing recordrtc, videojs and videojs-record via npm)

index.js

require('recordrtc');
const  videojs = require('video.js');
require('videojs-record');

const player = videojs('auth-video-player', {
  // video.js options
  controls: true,
  loop: false,
  width: $('#auth-video-container').width() || 320,
  height: $('#auth-video-container').height() || 240,
  plugins: {
    // videojs-record plugin options
    record: {
      image: false,
      audio: true,
      video: true,
      maxLength: 5,
      debug: true
    }
  }
});

// error handling
player.on('deviceError', function() {
  console.log('device error:', player.deviceErrorCode);
});

player.on('error', function(error) {
  console.log('error:', error);
});

// user clicked the record button and started recording
player.on('startRecord', function() {
  console.log('started recording!');
});

// user completed recording and stream is available
player.on('finishRecord', function() {
  // the blob object contains the recorded data that
  // can be downloaded by the user, stored on server etc.
  console.log('finished recording: ', player.recordedData);
});

I have tried with and without the ProvidePlugin with no change in results:

webpack.config.js

plugins: [
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    videojs: 'video.js',
    'window.videojs': 'video.js'
  }),
]

Results

Expected

It should be able to import the video.js dependency which has already been required.

Actual

webpack cannot compile due to module error.

Error output

webpack error

Module not found: Error: Cannot resolve module 'videojs' in [...]/app/node_modules/videojs-record/src/js

Additional Information

I’m able to compile successfully by changing line 6 of video.record.js to reference video.js instead of videojs, which is the name of the package in node_modules. However, I get a console error in the browser when I try to enable the video:

device error: ReferenceError: MRecordRTC is not defined
    at subClass.setup (main.js:79422)
    at constructor.onDeviceReady (main.js:80035)

I’m requiring RecordRTC before video.js and videojs-record so not sure why this is happening here.

versions

videojs

5.16.0 (latest on npm)

browsers

Chrome 56

OSes

Mac OSX 10.12.3

[jonathanfallon]

Works fine for me with resolve: {alias: {videojs: 'video.js'}} Thanks for the tutorial

[thijstriemstra]

@phanikumarballa see https://github.com/collab-project/videojs-record/wiki/Webpack#webpack-config