App.js missing dependencies when adding new package

Hi guys I am trying to add videojs-records to my Laravel 6 project .

Using this example ( https://github.com/collab-project/videojs-record/wiki/Webpack ) I have added:

app.js ->

import videojs from 'video.js';
import RecordRTC from 'recordrtc';
import adapter from 'webrtc-adapter';
import Record from 'videojs-record/dist/videojs.record.js';

package.json ->

"devDependencies": {
        "@fortawesome/fontawesome-free": "^5.11.2",
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "jquery-ui": "^1.12.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "7.*",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10",
        "webrtc-adapter": "^7.3.0",
        "videojs": "^1.0.0",
        "recordrtc": "^5.5.8",
        "videojs-record": "^3.8.0"
    }

And when try to build i got error for missing dependencies for videojs-record:

ERROR Failed to compile with 2 errors 10:20:18

These dependencies were not found:

RecordRTC in ./node_modules/videojs-record/dist/videojs.record.js
videojs in ./node_modules/videojs-record/dist/videojs.record.js

ERROR in ./node_modules/videojs-record/dist/videojs.record.js Module not found: Error: Can't resolve 'RecordRTC' in 'myproject/node_modules/videojs-record/dist'

ERROR in ./node_modules/videojs-record/dist/videojs.record.js Module not found: Error: Can't resolve 'videojs' in 'myproject/node_modules/videojs-record/dist'

What am I missing?

Thanks Tiho.

Sinnbeck

6 years ago

Level 102

First of all I think you need to import RecordRTC like this

import * as RecordRTC from 'recordrtc';

tihoti

6 years ago

Best Answer

Level 14

Resolved by myself:

What was missing are the webpack aliases.

Added:

webpack.mix.js

mix.webpackConfig({
    resolve: {
        alias: {
            videojs: 'video.js',
            WaveSurfer: 'wavesurfer.js',
            RecordRTC: 'recordrtc'
        }
    }
});

Sinnbeck

6 years ago

Level 102

Remember to mark your own answer as best. Others might run into the same issue :)

1 like

colinlongworth

5 years ago

Level 2

I have the same entries in my webpack.mix.js but when I load a Vue component with waveform I get:

"Error: plugin "wavesurfer" does not exist"

Do you do any imports in app.js or in the Vue Component itself?

Please or to participate in this conversation.