Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined

Question

I got package.json:

  "devDependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery": "^3.3.1",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }

with webpack.mix:

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();

and resource file:

so those files, looks like compiled properly by webpack >> npm run dev then I load it to blade template, but then in browser it show me that: jQuery is not defined...

Uncaught ReferenceError: jQuery is not defined

what's possibly went wrong here, why It can load jQuery while i have define it in package.json?

THanks!

I don't know if order of definition in devDependencies matters, but if it does, you have "bootstrap": "^4.1.3" before "jquery": "^3.3.1", which would be an issue since Bootstrap requires jQuery to run. — Tim Lewis
– Tim Lewis, Commented Jul 27, 2018 at 15:34
Having jQuery only in the package.json only shoudln't load it in the bundle. You should import/use it somewhere in the code. Webpack should in that case scan through the files and include it in the bundle — codisfy
– codisfy, Commented Jul 27, 2018 at 15:39
@codisfy, hmm, you giving me a hint, thanks, i have solve it :) — AnD
– AnD, Commented Jul 27, 2018 at 15:45
Yeah, I guessed it wasn't, but order of <script> inclusion is probably the most common cause of jQuery is not defined when using Bootstrap and jQuery, so figured I'd post it as a comment anyway. — Tim Lewis
– Tim Lewis, Commented Jul 27, 2018 at 15:51

AnD · Accepted Answer · 2018-07-27 16:12:41Z

3

few mins later after I posted the question...

here is the answer...

add this to your webpack:

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    };
});

edited Jul 27, 2018 at 16:12

answered Jul 27, 2018 at 15:45

AnD

3,1399 gold badges40 silver badges64 bronze badges

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

Collectives™ on Stack Overflow

Laravel 5.6 - webpack: Uncaught ReferenceError: jQuery is not defined

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