Video.js: build error with webpack on windows, depedencies not found with VideoJS.eot

[Gil-1]

Hello everyone,

Let's go for the template :

Description

I'm using Laravel 5.4 with Homestead and I build videojs with Laravel mix which runs webpack.
I tried to build the last 5.x and 6.x VideoJs but got that issue :

Error output

These dependencies were not found in node_modules:

• ./font/VideoJS.eot
• ./font/VideoJS.eot

Steps to solve

I edited manualy this file "node_modules\videojs-font\scss_icon.scss"
line 15 was : src: url('#{$icon-font-path}/VideoJS.eot?#iefix') format('eot');
line 15 now: src: url('#../fonts/VideoJS.eot?#iefix') format('eot');

I had to force the path wich is already defined at line 11 with :
$icon-font-path: '../fonts' !default;

I don't know why but that worked.

Additional Information

Please include any additional information necessary here. Including the following:

versions

videojs

5.x and 6.x.

OSes

Windows 10 with node 7.4.0 and npm 4.1.1

[yovanoc]

So, I have the same error...and your steps doesn't seems to solve it... In fact, why there is this problem?

[yovanoc]

My error is exactly this :

• ./font/VideoJS.eot in ./~/css-loader!./~/postcss-loader!./~/resolve-url-loader!./~/sass-loader/lib/loader.js?{"precision":8,"outputStyle":"expanded","sourceMap":true}!./resources/assets/sass/app.scss

[Gil-1]

For me the error is fixed by using the latest version of laravel mix.
I can build videojs without any issue now.

Before that, the simplest way to fix was to comment the @import line of the icons
in the "video-js.scss" file and add the line in your own main scss file.

[yovanoc]

nothing of you fixes worked for me...

my package.json :

{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"algoliasearch": "^3.20.3",
"autocomplete.js": "^0.23.0",
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"font-awesome": "^4.7.0",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.7",
"lodash": "^4.17.4",
"moment": "^2.17.1",
"node-sass": "^4.5.0",
"video.js": "^5.17.0",
"vue": "^2.1.10",
"vue-i18n": "^4.7.3",
"vue-router": "^2.1.1",
"vue-template-compiler": "^2.1.6"
}
}

[yovanoc]

then I delete the node_module folder, i run npm install --save, then i have the error that I mention above..

[ericnoguchi]

version: "video.js": "^5.18.4"

I have the same issue with webpack if it try to import the scss from node modules like so,

import 'video.js/src/css/video-js.scss';

error

ERROR in ./~/video.js/src/css/video-js.scss
Module build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './font/VideoJS.eot'

[socieboy]

Anyone got resolve this?

[samixxo]

Same problem here

[dziulius]

I've solved this issue by adding { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'url-loader' } to webpack loaders.

[floorish]

In addition to adding a specific loader for eot files, I needed to override the $icon-font-path before importing the videojs scss, such that webpack is able to find it:

$icon-font-path: "~videojs-font/fonts/";
@import 'video.js/src/css/video-js';

[dziulius]

I was loading css directly from javascript, so I did not need to setup scss variables.

[brainthinks]

In order to import the scss files into my own, I had to do both what @dziulius and @floorish suggested.

// myStyles.scss
$icon-font-path: '~videojs-font/fonts';
@import 'node_modules/video.js/src/css/video-js.scss';

// webpack.config.js
module.exports = [
  {
    module: {
      rules: [
        {
          test: /\.(eot|svg|ttf|woff|woff2)$/,
          loader: 'url-loader',
        },
        {
          test: /\.scss$/,
          use: extractSass.extract({
            fallback: 'style-loader',
            use: [
              { loader: 'css-loader' },
              { loader: 'sass-loader' },
            ],
          }),
        },
      ],
    },
  },
];

[mali3days]

import '!style-loader!css-loader!video.js/dist/video-js.min.css';

i just ignore webpack loaders for this import, and it's work for me.

[gkatsev]

Video.js 7 removes the eot reference, so, presumably it's fixed there. Please open a new issue if it's still a problem.