jaysheel's avatar

jQuery is not defined error.

Hi I wanted to add Material Design to my project, just importing the mdb.min.js file would sometimes create an error $(...).materialSelect is not defined. I found following solution https://gist.github.com/PabloCamp0s/a22b810af012d6110e98cb7539e96484#file-material-design-bootstrap-js

After adding the .scss and .js file. npm run watch compiled all the asset successfully. But now when I open the page I get following error

Uncaught ReferenceError: jQuery is not defined
    <anonymous> jQuery
    js app.js:710
    __webpack_require__ app.js:2637
    <anonymous> material-design-bootstrap.js:4

my app.js file look like this

require('./bootstrap');

import './material-design-bootstrap.js'

my boostrap.js file looks like this

window._ = require('lodash');

try {
     window.Popper = require('popper.js').default;
     global.$ = global.jQuery = require('jquery');

     // require('bootstrap');
     require('jquery-smooth-scroll')
} catch (e) {}

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

import Vue from 'vue';

window.Vue = Vue;

export const bus = new Vue();
window.axios = require('axios');

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

/**
 * 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.
 */
let token = document.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');
}

I have already install jquery using npm install jquery

and I also tried adding following to the top of webpack.mix file

mix.autoload({
    jquery: ['$', 'window.jQuery']
});

but still get

jQuery is not defined error

I have spend 4hrs trying to find a solution but no luck, can someone please point out what I am missing or doing wrong.

Thank you Jaysheel

0 likes
5 replies
jaysheel's avatar

Hi, Here is my package.json file

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.32.8",
        "sass-loader": "^8.0.2",
        "webpack": "^5.12.3",
        "webpack-cli": "^4.3.1"
    },
    "dependencies": {
        "@fortawesome/fontawesome-free": "^5.15.2",
        "animate.css": "^4.1.1",
        "chart.js": "^2.9.4",
        "d3-scale-chromatic": "^2.0.0",
        "datatables.net-bs4": "^1.10.23",
        "datatables.net-buttons-bs4": "^1.6.5",
        "datatables.net-fixedheader-bs4": "^3.1.7",
        "datatables.net-responsive-bs4": "^2.2.7",
        "datatables.net-scroller-bs4": "^2.0.3",
        "dropzone": "^5.7.2",
        "icheck-bootstrap": "^3.0.1",
        "ion-rangeslider": "^2.3.1",
        "jquery-smooth-scroll": "^2.2.0",
        "jszip": "^3.5.0",
        "overlayscrollbars": "^1.13.1",
        "pdfmake": "^0.1.69",
        "popper.js": "^1.16.1",
        "vue": "^2.6.12",
        "vue-loader": "^15.9.6",
        "vue-template-compiler": "^2.6.12",
        "wnumb": "^1.2.0"
    }
}
jaysheel's avatar

Hi, Wondering if you have any insight on this issue.

jlrdw's avatar

Mix is optional try just installing (using) the minimized version and see if that works.

I use fetch.js now, but an older project I had no trouble just using the minimized jquery version.

jaysheel's avatar

Hi, But shouldn't

window.$ = window.jQuery = require('jquery');

load jquery? is this async process that jquery is not loaded before calling

import './material-design-bootstrap.js'

which imports

import '../../vendor/mdb/4.17.0/src/js/vendor/free/jquery.easing';

where the current error occurs?

I also notice that future down the list VUE is also not being loaded

Uncaught ReferenceError: Vue is not defined

my boostrap.js file is loading Vuejs

import Vue from 'vue';

window.Vue = Vue;

I feel like I am missing something here

Please or to participate in this conversation.