Webpack problem - Cannot resolve module 'videojs'
See original GitHub issueDescription
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
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (2 by maintainers)
Works fine for me with
resolve: {alias: {videojs: 'video.js'}}
Thanks for the tutorial@phanikumarballa see https://github.com/collab-project/videojs-record/wiki/Webpack#webpack-config