BlastedAsh's avatar

Can't seem to get my jquery node_module loaded in app.js

[Laravel 5.5] Wanted to install an admin panel onto my pre-existing application. So I was following this tutorial: https://www.youtube.com/watch?v=rVLWXA1tnVY on a pre-existing project. I did the npm install for the latest adminlte 3 alpha. Created a master blade view.

Now I got everything working EXCEPT the required scripts.

In resources/assets/js/bootstrap.js I added: window._ = require('admin-lte');

So it's my understanding that instead of the following : master.blade.php (for the admin lte starter template footer)

<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>

I can have :

Since I thought Laravel Mix would throw everything into the app.js file. It mostly worked, except for the right side bar to open and close (control sidebar).

However if I delete the app.js line and instead add:

<script src="{{asset('css/temp/jquery/jquery.min.js')}}" ></script>
<script src="{{asset('css/temp/js/adminlte.min.js')}}" ></script>

(i copied the js files into a temporary directory to reference locally without mix, ignore the css directory - just threw it in there to debug)

Anyhow this way everything works as it should. I'm suspecting that my laravel mix doesn't use the jquery.min.js. Why? I have jquery in node_modules/jquery, AND i have jquery in node_modules/adminlte/plugins/jquery. So I'm like okay, i'll just type 'require('jquery'); under the require admin-lte function mentioned earlier. Doesn't work. So then I tried doing (even switched the order of them):

<script src="{{asset('js/app.js')}}"></script>
<script src="{{asset('css/temp/jquery/jquery.min.js')}}" ></script>

and it doesn't work. Basically when js/app.js is present, the jquery dies.

I then tried :

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

and imported the manifest, vendor, and app.js individually and it didn't work either.

I must be doing something really silly, also spent way too many hours on this. Anybody know what I am goofing up on?

EDIT: Tried this:

mix.js('resources/assets/js/app.js', 'public/js')
   .combine(['public/js/app.js','node_modules/admin-lte/plugins/jquery/jquery.min.js'],'public/js/app.js')
   .sass('resources/assets/sass/app.scss', 'public/css');

and still doesn't load jquery.

0 likes
2 replies
AlexanderKim's avatar

I had the same issue with owl carousel, try to add this in your mix:

.autoload({jquery: ['$', 'window.jQuery', 'jQuery']})
GTHell's avatar

You can try putting it inside body tag instead of head tag.

Please or to participate in this conversation.