Laravel Mix and JS stop working

[podionne]

Question	Answer
Issue or Enhancement	Issue
Laravel Version	8.39.0
Project Version	3.5

Current Behavior

When I follow the steps in the wiki to enable Laravel Mix, this line in the resources/js/bootstrap.js file seem to not load the JS properly. For example, the sidebar toggles don't work:

require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte'); // not working

For a reason that I don't know, in my project, there is also a folder called /public/vendor/adminlte/dist/js/adminlte.

In the resources/js/bootstrap.js file, when I do this, the javascript is loaded properly and the sidebar toggles start working again:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    require('overlayscrollbars');
    require('../../public/vendor/adminlte/dist/js/adminlte'); // working
    //require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte'); // not working

} catch (e) {}

1. Do you know why I have this folder?
   /public/vendor/adminlte/dist/js/adminlte

2. Do know know why require('../../public/vendor/adminlte/dist/js/adminlte') is working, but not require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte') even if those files are identicals?

Thanks

Expected Behavior

I would expect require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte') to load JS properly.

[dfsmania]

Hi @podionne , I'm not familiar with laravel mix. But maybe next issues can help you, the problem was similar:

• js does not work properly when implementing laravel mix #854
• Sidebar Collapse Button is not working after upgrading #629

Do you know why I have this folder?
/public/vendor/adminlte/dist/js/adminlte

Yes, it is part of the installation of this package, usually the AdminLTE files are published on the public folder. So we can include it on the master.blade.php file using the Laravel's asset() method. Note this procedure is only used when not enabling laravel mix. On the other hand, for laravel mix I think multiple files are compiled and installed (also) inside the public folder but usually as css/app.css and js/app.js (Check issue #525). However I may be wrong here...

Good luck, maybe someone can help you better here...

[podionne]

Thank you @Shidersz you answered my 1st question! :)

As for my 2nd question, I still don't know why this line:
require('../../public/vendor/adminlte/dist/js/adminlte')
makes the AdminLTE js files build correctly in the js/app.js with Laravel Mix, but not this line:
require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte')
Anyone encountered this issue before?
Much thanks!

[dfsmania]

@podionne Have you checked if is not an access / permissions problem? Just in case...

[aksvitpav]

I have the same problem exactly.

[dfsmania]

@aksvitpav Maybe @podionne has found a solution by this time. However, have you checked for permissions problem or errors on the browser's console?

[aksvitpav]

@Shidersz No errors in console, all permissions are ok. require('../../public/vendor/adminlte/dist/js/adminlte') is my solution too.

[dfsmania]

@aksvitpav Not sure what can be the problem. I'm not familiarized with Laravel Mix... However, share your resources/js/bootstrap.js content. Maybe other can help you. Just in case, when @podionne shared his config, he wrote:

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    require('overlayscrollbars');
    require('../../public/vendor/adminlte/dist/js/adminlte'); // working
    //require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte'); // not working

} catch (e) {}

Can you try commenting out require('bootstrap') to see what happen? Since is not mentioned on the documentation .

[podionne]

Thanks, guys! I haven't found any other solution yet. I'll keep you posted if I find why.

[Jagdish-J-P]

May be I am wrong but you can't access files outside of the public directories. As public is the root directory of laravel.

Detailed information is given in this link.

https://stackoverflow.com/a/31528972

[aksvitpav]

Hello. Today I'm create new Laranel 8 project with Laravel-AdminLTE and I do not have this problem anymore.

[dfsmania]

@aksvitpav Thanks for sharing. However the problem is rare, I hope someone can found a clue of what is causing that issue on the future.

[DiegoAlonso27]

yo resolví ese problema con lo siguiente:

npm install jquery
en el archivo bootstrap.js:
window.$ = window.jQuery = require('jquery');
require('overlayscrollbars');
require('../../vendor/almasaeed2010/adminlte/dist/js/adminlte.min.js');

[giusniyyel]

Solution

Hello guys, so I had the same issue and start to test a lot of things. At some point we learnt to import the app.js & app.css into the blade page, but here we don't need it to load, because this repo do it by itself, in the config file config/adminlte.php when it is specified the paths of this files.
If we import this files into our blade pages then some issues may happen, like the collapse button of the sidebar, the search that is shown in the sidebar when is collapsed and others, so if you are having this issues remember to not to import app.js & app.css into the blade pages.

Hope this works for y'all.