Level 1
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.
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
Please or to participate in this conversation.