Cannot get Video.js to import using Laravel Mix - laravel

Question

I've downloaded Video.js using npm, but I'm having trouble getting it imported to use it on the front end. Here are the steps I've taken:
Installed Video.js with npm, and the /node_modules directory was created.
Added code to webpack.mix.js at the beginning of the file.
webpack.mix.js
const mix = require('laravel-mix');
const path = require('path');
mix.webpackConfig({
resolve: {
alias: {
'videojs': path.resolve(__dirname, 'node_modules/video.js/dist/video.min.js'),
}
}
});
Ran npm run dev successfully.
added below code to view play.blade.php:
play.blade.php
<script type="module">
import 'videojs';
videojs('my-player');
</script>
I get this error Uncaught TypeError: Failed to resolve module specifier "videojs". Relative references must start with either "/", "./", or "../".
Why is it searching for a path when I'm using an alias?
I've tried so many variations of getting the package to import and no success, been stuck for 2 days. How do I solve this? I want to use video.js in the view.

Answer 1

First, install the latest version of Video.js.
npm install --D video.js
In /resources/js/bootstrap.js add...
window._ = require('lodash');
require('video.js');
Compile your assets...
npm run prod
Add the following to your layout.
<script src="{{ asset('js/app.js') }}"></script>
For reference here's my package.json.
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "mix",
"watch": "mix watch",
"watch-poll": "mix watch -- --watch-options-poll=1000",
"hot": "mix watch --hot",
"prod": "npm run production",
"production": "mix --production"
},
"devDependencies": {
"axios": "^0.21",
"laravel-mix": "^6.0.18",
"lodash": "^4.17.21",
"postcss": "^8.2.13",
"video.js": "^7.11.8"
}
}
And also webpack.mix.js.
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
//
]);
Then, in the player.
<video
id="my-video"
class="video-js"
controls
preload="auto"
width="640"
data-setup="{}">
<p class="vjs-no-js">
To view this video please enable JavaScript,
and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">
supports HTML5 video
</a>
</p>
</video>
If you want to use the CSS. then include in /resources/css/app.css:
#import "~video.js/dist/video-js";