Laravel-mix: Laravel Mix error with processCssUrls:true

[asivaneswaran]

• Laravel Mix Version: 0.11.4 (npm list --depth=0)
• Node Version (node -v): 7.10.0
• NPM Version (npm -v): 4.5.0
• OS: Homestead on Vagrant with VBox on Windows 10

Description:

I am having an error when I try to run npm run dev with processCssUrls set to true (default). I keep getting:

 error  in ./resources/assets/less/admin/images/error-bg.jpg

Module build failed: Error: spawn /home/vagrant/Code/kin-ball-v4/node_modules/mozjpeg/vendor/cjpeg ENOENT
    at exports._errnoException (util.js:1050:11)
    at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
    at onErrorNT (internal/child_process.js:367:16)
    at _combinedTickCallback (internal/process/next_tick.js:80:11)
    at process._tickCallback (internal/process/next_tick.js:104:9)

 @ ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/admin/style.less 5:80838-80870
 @ ./resources/assets/less/admin/style.less
 @ multi ./~/laravel-mix/src/mock-entry.js ./resources/assets/less/admin/style.less

``` error in ./resources/assets/less/admin/images/profile-menu.png

Module build failed: Error: spawn /home/vagrant/Code/kin-ball-v4/node_modules/optipng-bin/vendor/optipng ENOENT
at exports._errnoException (util.js:1050:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:193:32)
at onErrorNT (internal/child_process.js:367:16)
at _combinedTickCallback (internal/process/next_tick.js:80:11)
at process._tickCallback (internal/process/next_tick.js:104:9)

@ ./~/css-loader?{"url":true,"sourceMap":false}!./~/postcss-loader?{"sourceMap":false}!./~/less-loader?{}!./resources/assets/less/admin/style.less 5:106624-106660
@ ./resources/assets/less/admin/style.less
@ multi ./~/laravel-mix/src/mock-entry.js ./resources/assets/less/admin/style.less
```

I tried disabling it and it was able to build just fine.... I am compiling less files btw.

Steps To Reproduce:

I am not sure, I followed the installation process... I am not sure what I am doing wrong..

[ankurk91]

Seems like img-loader is causing these issues, there is a way to disable image minifications without disabling url processing in css. Check this commit

mix.options({
  processCssUrls: true,
  imgLoaderOptions: {
    enabled: false,
  }
});

Can you try above config until someone fix this issue.

[JeffreyWay]

Can someone give me reproducible steps for this, so that we can make a fix?

[BWibrew]

I'm having the same problem compiling SASS. This only seems to be caused by jpeg image files.

Steps To Reproduce:

• Fresh install (Laravel v5.4, Mix v0.12.1)
• Create basic SASS file with image URL using test JPEG image

Using this SCSS file:

.jpg {
    background-image: url('../images/test.jpg');
}

and this Mix:

const { mix } = require('laravel-mix');
mix.sass('resources/assets/sass/test.scss', 'public/css');

Thanks for the tip @ankurk91

[BWibrew]

That was just an example. To reproduce you just need to use a relative URL pointing to a jpeg image.

[tyler36]

Having same issue.
Also tried clean install of node_modules via Yarn but no joy.

Laravel Mix Version: 0.12.1
Node Version (node -v): 7.5.0
NPM Version (npm -v): 4.2.0
OS: Windows 10

[christophwolff]

Any Updates on this? Having the same issue.

[cientistapedrosa]

Having same issue.

Laravel Mix Version: 0.11.4
Node Version (node -v): 6.10.3
NPM Version (npm -v): 3.10.10
OS: Ubuntu 16.04 (Homestead Laravel)

[ruchern-chong]

@cientistapedrosa Update npm version and try again? v3 is really old now.

[cientistapedrosa]

@ruchern I upgraded to version 5.0.3, but it still has the same error.

The version 0.12.1 of the laravel mix, did not give an error, but did nothing, did not generate the tasks of the mix. So I downgraded to version 0.11.4.

[vaniyokk]

+1 for this weird issue, fresh install, latest laravel-mix, node, npm, Winows 10

a lot of errors with image libraries during npm install, then errors in npm scripts

[rootpd]

This has to have something with dependencies and --no-sym-links that have to be used on Windows I guess. I have the same issue with optipng and also with node-sass.

Anyway, I've added "optipng-bin": "^4.0" to my package.json, run yarn install --no-bin-links and it was enough. I think it does no harm within devDependencies section.

One more thing. If you encounter any error because you forget to add --no-bin-links, you have to reinstall the optipng-bin (yarn add optipng-bin). I haven't figured out why yet, it's just that way.

[quentincaffeino]

mix.options({ processCssUrls: true, imgLoaderOptions: { enabled: false, } });

This config fix @ankurk91 provided sends me to infinite loop of building sources when using npm run watch. Working if disable processCssUrls

[gavinr]

to fix this, I ran:

npm rebuild optipng-bin
npm rebuild node-sass

[mamorunl]

I ran a mix of the above commands. Added optipng-bin: ^4.0 as @rootpd said and ran the two commands that @gavinr mentioned. Both were unsuccessful for me, but after running npm rebuild mozjpeg --no-bin-links (because windows), it compiled successfully.

I don't know what fixed it. It may be just the npm rebuild mozjpeg that did the trick, or a combination of the above.

[mineschan]

@mamorunl thanks, mine situation fixed with only a run of npm rebuild mozjpeg

[lkmadushan]

same issue. npm rebuild doesn't work for me :(

got this issue with docker node:alpine image. after changing it to node:latest container it works for me.

[drewpayment]

+1 for me. Fresh install, relative path to .jpg. None of the above suggestions worked for me.

Laravel 5.5
NPM 5.3.0
Node.js 8.5.0
OS: macOS Sierra 10.13

If I save the image into my public images folder, then drop the relative path, mix will throw errors but actually compile and work.

url('../../public/images/my-image.jpeg')
Causes compilation loop with npm run watch but seems to work fine with npm run dev

url('images/my-image.jpeg')
Throws mix error, but actually builds and works but npm run watch stops after the second compilation (first observed changes)

Also, I ran php artisan preset none & vue to strip the frontend and scaffold Vue for use with Bootstrap 4. Maybe I could convert to dataurl first with a custom loader? Not sure if this would change the outcome with jpgs and would probably not be a good fix, but just a workaround.

[the94air]

I am using ubuntu 16.04 and I solved the issue by

1. sudo apt-get install autoconf
2. sudo apt-get install dh-autoreconf
3. npm rebuild mozjpeg

[mylgeorge]

1. sudo apt-get install nasm
2. npm rebuild mozjpeg

solved the issue for me (ubuntu 16.04)

[AndersonFriaca]

Same here

Thanks @mylgeorge !!

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.