Owlcarousel2: Webpack npm error

[WeeHong]

I always receive this error whenever I run npm run dev on my server.

ERROR in ./node_modules/owl.carousel/dist/assets/owl.video.play.png
Module build failed: Error: spawn /var/www/blissbox/node_modules/optipng-bin/vendor/optipng ENOENT
    at _errnoException (util.js:1021:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:192:19)
    at onErrorNT (internal/child_process.js:374:16)
    at _combinedTickCallback (internal/process/next_tick.js:138:11)
    at process._tickCallback (internal/process/next_tick.js:180:9)
 @ ./node_modules/css-loader!./node_modules/owl.carousel/dist/assets/owl.carousel.css 6:3522-3553
 @ ./node_modules/owl.carousel/dist/assets/owl.carousel.css
 @ ./resources/assets/js/frontend/universe.js
 @ multi ./resources/assets/js/frontend/universe.js
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/weehong/.npm/_logs/2017-10-27T11_05_18_768Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ dev: `npm run development`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/weehong/.npm/_logs/2017-10-27T11_05_18_900Z-debug.log

May I know what's the issue and how to rectify it?

[AlexiZ]

Hi,

I submitted a PR that may solve your issue : https://github.com/OwlCarousel2/OwlCarousel2/pull/2140

[pascalporedda]

@WeeHong The according PR is merged. Is this error still occurring for you?

[nacm]

I also have the same issue, I using webpack to build and givesModule build failed: ModuleNotFoundError: Module not found: Error: Can't resolve './owl.video.play.png' in '..../resources/assets/styles'

[pascalporedda]

@nacm Even with the latest version? There you can specify a path variable in the .scss file.

[nacm]

@pascalporedda I installed using npm and it installed v2.2.0. There is no version higher than 2.2.0 in npm directory. Thanks

[pascalporedda]

@nacm I will be contacting david to update the npm registry entry to the latest version, then you should receive 2.3.1

[WeeHong]

@pascalporedda
I am not sure about that because I do not face the issue right now.

I used to fix it by using npm rebuild.

[nacm]

it did not fix mine, what I have to do was comment that line every time i update npm.

[pascalporedda]

Which line do you mean @nacm?

[nacm]

Line 20 in _video.scss: background: url("owl.video.play.png") no-repeat;
@pascalporedda As I mentioned earlier I did not get the latest version from the npm install.

[nacm]

@pascalporedda Just did a fresh installation with the latest version 2.3.2 from npm and added this: $owl-image-path: "~owl.carousel/src/img/"; to the _variables.scss in my project and its working fine. btw I m using Roots stack.

[rubenkuipers]

Any updates regarding this matter? I'm having the same issue here..

[pascalporedda]

@kuiperr005 This should be working since version 2.3

Which error do you encounter?

[rubenkuipers]

The loader can't resolve the video image, even with a custom $owl-image-path defined in my main app.scss. I ended up just importing the .css files as a .scss file and fixing the image path myself.

[pascalporedda]

Well at least you found a solution to your problem, for me it is working fine if i set a correct image path.

I will close this issue now, if anyone else still encounters any issues feel free to reply to me.

[nicklee]

Having the same issue, with 2.3, $owl-image-path defined in my variables file, so guessing it's not fixed yet!

[AppField]

@nicklee I've just had the same issue.
I had to set the $owl-image-path variable BEFORE the owl scss import.

This is how it works for me:

$owl-image-path: "~owl.carousel/src/img/";
@import '~owl.carousel/src/scss/owl.carousel';
@import '~owl.carousel/src/scss/owl.theme.default';

[ashblue]

Path has to be absolute for some reason. Ultimately this worked for me.

```
$owl-image-path: "/node_modules/owl.carousel/src/img/";

[ZeldOcarina]

This is not handling for me!