aravind2base's avatar

Uncaught ReferenceError: $ is not defined - Laravel 5.5

Hi,

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 file


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

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

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

/**
 * We'll load the axios HTTP library which allows us to easily issue requests
 * to our Laravel back-end. This library automatically handles sending the
 * CSRF token as a header based on the value of the "XSRF" token cookie.
 */

window.axios = require('axios');

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

/**
 * Next we will register the CSRF Token as a common header with Axios so that
 * all outgoing HTTP requests automatically have it attached. This is just
 * a simple convenience so we don't have to attach every token manually.
 */

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');
}

/**
 * Echo exposes an expressive API for subscribing to channels and listening
 * for events that are broadcast by Laravel. Echo and event broadcasting
 * allows your team to easily build robust real-time web applications.
 */

// import Echo from 'laravel-echo'

// window.Pusher = require('pusher-js');

// window.Echo = new Echo({
//     broadcaster: 'pusher',
//     key: 'your-pusher-key'
// });
//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 Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

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

//
mix.copy('node_modules/jquery-slimscroll/jquery.slimscroll.min.js', 'public/js/jquery.slimscroll.min.js');   

//Main Libraries Styles

mix.styles([
    'public/css/pignose.calendar.min.css',
    'public/css/magnific-popup.css',
    'public/css/select2.min.css'
], 'public/css/main_libraries.css');

//Main Custom Styles

mix.styles([
    'public/css/developer.css',
    'public/css/style.css'
], 'public/css/main_custom.css');

//Inner Page Styles
mix.styles([
    'public/css/social.css',
    'public/css/myprof.css',
    'public/css/onsenui.css',
    'public/css/inner_style.css',
    'public/css/loader.css'
    
], 'public/css/inner.css');


//Main Library Scripts
mix.scripts([
    'public/js/jquery.ui.touch-punch.min.js',
    'public/js/jquery.slimscroll.min.js',
    'public/js/jquery.nicescroll.js',
    'public/js/jquery.magnific-popup.min.js',
    'public/js/pignose.calendar.full.min.js',
    'public/js/select2.min.js'
    
], 'public/js/main_libraries.js');

//Main Custom Scripts
mix.babel([
    'public/js/custom-scripts.js',
    'public/js/custom.js',
    'js/search-results.js',
], 'public/js/main_custom.js');

//Basket Scripts
mix.babel([
    'public/js/pages/basket.js',
    'public/js/pages/basket_transitions.js',
    'public/js/pages/basket-address.js',
    'public/js/pages/reminder.js'

], 'public/js/pages/basket_operations.js');

Laravel Version : 5.5 Mix Version : 1.7.2

0 likes
5 replies
Verdemis's avatar

Did you check if jquery get's actually included in your app.js?

I had a similar problem and it turned out that my jquery.js wasn't loaded at all.

And you should ensure that your jquery.js is loaded before everything else.

Verdemis's avatar

And your code with $ is definitly executed after jQuery was loaded?

rin4ik's avatar

inside app.js did you require bootstrap js file?

require('./bootstrap');

Please or to participate in this conversation.