Uncaught ReferenceError: $ is not defined - Laravel 5.5 + Laravel Mix

Question

I recently check out my project from SVN. I ran into "Uncaught ReferenceError: $ is not defined" where ever I have used "$" ie; Jquery. I am using laravel mixer to combine the JS and CSS Files.

This is my bootstrap.js

window._ = require('lodash');
window.Popper = require('popper.js').default;
window.tooltip = require('tooltip.js');



try {
    window.$ = window.jQuery = require('jquery');
    require('jquery-ui-dist/jquery-ui.min.js');
    require('bootstrap');
} catch (e) {}


window.axios = require('axios');

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';



let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {
    window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
    console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}

//Moment JS
window.moment = require('moment');
//Collect JS
window.collect = require('collect.js');
//Clipboard JS
window.ClipboardJS = require('clipboard');
//Import Toster
window.toastr = require('toastr');
//Swaet Alert
import Swal from 'sweetalert2';

window.swal = Swal;
//Owl Carousel
window.owlCarousel =  require('owl.carousel');
//JS Cookie
window.Cookies = require('js-cookie');
//Image Zoom
require('ez-plus');

This is my webpack.mix.js

let mix = require('laravel-mix');

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

My Laravel Version: 5.5.40 laravel-mix Version: 1.7.2

This is happening because of wrong order or JS files being appended one after another. As you have given path to JS folder, the files in that folder will be in alphabetic order and so the sequence in the minified JS file. — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Jul 23, 2018 at 13:16
@HimanshuUpadhyay I have not modified the bootstrap.js file.I have kept as it was. — Arjun Sankar
– Arjun Sankar, Commented Jul 23, 2018 at 13:21
So if your custom Jquery code which uses $ from jquery.min.js file and it is appended to the minified file before jquery file got added, then obviously it is not going to get reference of $ — Himanshu Upadhyay
– Himanshu Upadhyay, Commented Jul 23, 2018 at 13:22

TheWebs · Accepted Answer · 2019-02-06 19:14:32Z

3

This worked for me:

Remove the defer from the app.js script tag and change window.$ = window.jquery = to global.$ = global.jquery =

Weather or not this is the correct way to do it, this has worked for me.

laravel 5.7

answered Feb 6, 2019 at 19:14

TheWebs

13k32 gold badges118 silver badges222 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Uncaught ReferenceError: $ is not defined - Laravel 5.5 + Laravel Mix

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related