React Wiki - TypeError: EngineClass is not a constructor

Description

I am following the React Wiki @ vidoejs-record/wiki/React and was able to compile and run on localhost:3000 to test. When clicking on the record button an error is thrown. I tried running with prior versions of videojs-record (2.3.0 and 2.3.1) but the same error was output.

This is related to Issue 249.

Steps to reproduce

Follow all the steps in the React Wiki (link above), execute npm start, go to localhost:3000, and click on the record button. The only step I modified I modified (per the instructions) the index.html file in the ‘public’ directory. NOTE: The Wiki instructions “Edit src/index.html:” should read “Edit public/index.html:”. All other steps were followed exactly.

Results

Expected

I expect to record video with audio when clicking the record button.

Actual

In the browser console an error is output.

Error output

TypeError: EngineClass is not a constructor at Record.onDeviceReady (videojs.record.js:2214) __stack_frame_overlay_proxy_console__ @ index.js:2178 onDeviceReady @ videojs.record.js:2216 Promise.then (async) getDevice @ videojs.record.js:2123 handleClick @ videojs.record.js:488 bound @ video.cjs.js:2070 data.dispatcher @ video.cjs.js:1717

Additional Information

Excerpt from webpack.config.dev.js file:

    // for React Native Web.
    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
    alias: {
      // Per @ https://github.com/collab-project/videojs-record/wiki/React
      videojs: 'video.js',
      WaveSurfer: 'wavesurfer.js',
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
    },

and from the plugins array at the bottom of the webpack.config.dev.js file:

    // Added per @ https://github.com/collab-project/videojs-record/wiki/React
    new webpack.ProvidePlugin({
      videojs: 'video.js/dist/video.cjs.js',
      RecordRTC: 'recordrtc'
    }),

From the comment at the bottom of Issue 249 I tried changing the webpack.config.dev.js file line videojs: 'video.js/dist/video.cjs.js' to videojs: 'video.js/dist/video.umd.js'. But when I did the app would not compile and threw this error:

Failed to compile.

./node_modules/videojs-record/dist/videojs.record.js
Module not found: Can't resolve 'video.js/dist/video.umd.js' in '/Users/john.blakey/gitref/JB/react-audio-recording/my-app/node_modules/videojs-record/dist'

From the package.json file dependencies section:

    "videojs-record": "^2.3.2",

versions

videojs-record

2.3.2

video.js

7.1.0

recordrtc

5.4.7

browsers

Chrome Version 67.0.3396.99

OSes

macOS High Sierra Version 10.13.6

[johnblakey]

@thijstriemstra It worked as expected for me, thanks for your help

[thijstriemstra]

@johnblakey here’s a dist directory with the #264 changes that you can use to overwrite your local node_modules/videojs-record/dist directory.

dist.zip