Adminlte: Dependencies error with new laravel (5.4) webpack.

[BarryPooter]

Information

With the release of the new laravel (5.4) and the default usage of the new webpack instead of gulp to compile all resources using npm run dev also came a new way to load url's in sass. Instead of paths like; ../img/img.jpg there now a need to have the paths look like this: ~/../img/img.jpg.

I'm not really sure how non-laravel projects react to this change thus why I am making this issue.

The changes that need to be made are as follows:

1. Go to node_modules/admin-lte/dist/css/AdminLTe.css:50.
2. Change ../img/boxed-bg.jpg to ~/../img/boxed-bg.jpg.

How to duplicate this error

1. Setup a (fresh) laravel 5.4 environment using the new webpack and npm.
2. Add the admin-lte module and run the npm install command.
3. After the install is done, run npm run dev.

Exact error relevant for the AdminLTE module:

These dependencies were not found in node_modules:

* ../img/boxed-bg.jpg

[almasaeed2010]

Hello @IkRookG,

Thanks for the organized issue report!

Unfortunately, I couldn't replicate your issue. Following your steps with AdminLTE2.3.11, I got this result after running npm run dev

> @ dev /home/vagrant/sites/testingAdmin
> 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

 95% emitting                                                                 p      
 DONE  Compiled successfully in 5780ms                               10:56:43 PM

                                                                    Asset      Size  Chunks                    Chunk Names
  fonts/glyphicons-halflings-regular.eot?f4769f9bdb7466be65088239c12046d1   20.1 kB          [emitted]         
  fonts/glyphicons-halflings-regular.svg?89889688147bd7575d6327160d64e760    109 kB          [emitted]         
  fonts/glyphicons-halflings-regular.ttf?e18bbf611f2a2e43afc071aa2f4e1512   45.4 kB          [emitted]         
 fonts/glyphicons-halflings-regular.woff?fa2772327f55d8198301fdb8bcfc8158   23.4 kB          [emitted]         
fonts/glyphicons-halflings-regular.woff2?448c34a56d699c29117adc64c43affeb     18 kB          [emitted]         
                                                               /js/app.js   1.16 MB       0  [emitted]  [big]  /js/app
                                                             /css/app.css    686 kB       0  [emitted]  [big]  /js/app
                                                        mix-manifest.json  66 bytes          [emitted]

Thanks!

[rasmusdencker]

+1. I think you're missing a step, @IkRookG.

@almasaeed2010 between steps 2 and 3, the simplest way to reproduce is going to webpack.mix.js and changing:

mix.js('resources/assets/js/app.js', 'public/js')
     .sass('resources/assets/sass/app.scss', 'public/css');

to

mix.less('node_modules/admin-lte/build/less/AdminLTE.less', 'public/css');

Then run npm run dev. By the way this isn't related directly to Laravel, rather to the Webpack-wrapper package laravel-mix

[rasmusdencker]

@IkRookG For now it's fixable by putting mix.options({ processCssUrls: false }); in your webpack.mix.js (See these release notes) 👍

[BarryPooter]

@dondencker Hey thanks for filling in how to reproduce this error, I guess I was a little bit too quick with explaining.

Also the processCssUrls option does seem to fix this behaviour, so thanks for that suggestion :+1: , that'll save me the headache of manually doing this on every update for now.

[nicozimmermann94]

I have the same issue. processCssUrls does the trick but why? What is the reason for this? This is a kind of ugly fix.

[BarryPooter]

@nicozimmermann94 Try updating to a newer laravel-mix version (0.8.0 for instance), it works properly now without the processCssUrls.

[almasaeed2010]

It seems like this is a Laravel Elixir issue since, as @IkRookG says, it have been fixed there.

Thanks!

[normanaranez]

I also got error same as he is.

here's my code

mix.less('resources/assets/less/admin.less', 'public/admin/css');

admin.less file
@import "../../../node_modules/admin-lte/build/less/AdminLTE.less";

[pr4xx]

This error still exists in current laravel mix and admin lte. I am trying to update the @boxed-layout-bg-image-path variable but no path seems to be valid.

[acacha]

please @almasaeed2010 consider to reopen this issue.

I think this PR:

https://github.com/almasaeed2010/AdminLTE/pull/1526

Could help avoiding the problem replacing file image with css dummy image?

[gorjan-mishevski]

Still a problem.
Laravel mix 2.0

ERROR in ./node_modules/admin-lte/dist/img/boxed-bg.jpg
Module build failed: Error: write EPIPE
    at exports._errnoException (util.js:1020:11)
    at WriteWrap.afterWrite (net.js:800:14)
 @ ./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/lib??postcss!./node_modules/admin-lte/dist/css/AdminLTE.css 7:1187-1217
 @ ./node_modules/css-loader??ref--8-2!./node_modules/postcss-loader/lib??postcss!./node_modules/resolve-url-loader??ref--8-4!./node_modules/sass-loader/lib/loader.js??ref--8-5!./resources/assets/sass/app.scss
 @ ./resources/assets/sass/app.scss
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/app.scss

[lucianobosco]

Be care with processCssUrls option. In my case it makes that Font Awesome fails to load fonts when using it from node_modules.
The @KakaCarrotCake solution worked like a charm form me, but just changing the image url to /node_modules/admin-lte/dist/img/boxed-bg.jpg