Laravel-mix: jQuery autoloading apparently not working (again)

Created on 26 May 2017 · 3Comments · Source: JeffreyWay/laravel-mix

Hello, I'm having a trouble loading jQuery. I have a relatively fresh installation of Laravel, but I receive the following error after compiling for either production or development.

vendor.bd76bdea4ce303a45eae.js:1689 Uncaught Error: Bootstrap's JavaScript requires jQuery
    at Object../node_modules/bootstrap-sass/assets/javascripts/bootstrap.js (vendor.bd76bdea4ce303a45eae.js:1689)
    at __webpack_require__ (manifest.d41d8cd98f00b204e980.js:53)
    at Object.2 (vendor.bd76bdea4ce303a45eae.js:59962)
    at __webpack_require__ (manifest.d41d8cd98f00b204e980.js:53)
    at webpackJsonpCallback (manifest.d41d8cd98f00b204e980.js:24)
    at vendor.bd76bdea4ce303a45eae.js:1
./node_modules/bootstrap-sass/assets/javascripts/bootstrap.js @ vendor.bd76bdea4ce303a45eae.js:1689
__webpack_require__ @ manifest.d41d8cd98f00b204e980.js:53
2 @ vendor.bd76bdea4ce303a45eae.js:59962
__webpack_require__ @ manifest.d41d8cd98f00b204e980.js:53
webpackJsonpCallback @ manifest.d41d8cd98f00b204e980.js:24
(anonymous) @ vendor.bd76bdea4ce303a45eae.js:1

I've had a read through the issues (#819, #682, 499e4be), but can't work out what mistake I've made. Any advice would be much appreciated.

Below is a list of the various package versions as well as relevant code snippets.

packages

yarn list axios bootstrap-sass jquery laravel-echo lodash moment vue cross-env laravel-mix             
yarn list v0.24.5
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

webpack.mix.js

mix.js('resources/assets/js/app.js', 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .extract(['axios', 'bootstrap-sass', 'jquery', 'laravel-echo', 'lodash', 'moment', 'vue']);

if (mix.config.inProduction) {
    mix.disableNotifications();
    mix.version();
}

bootstrap.js

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

    require('bootstrap-sass');
} catch (e) {
}

app.blade.php

    <!-- Scripts -->
    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>
</body>
</html>

Source

kezkankrayon

Most helpful comment

You need to add this to your webpack.mix.js file:

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

thecrypticace on 27 May 2017

👍13 🎉1

All 3 comments

You need to add this to your webpack.mix.js file:

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

thecrypticace on 27 May 2017

👍13 🎉1

Thank you @thecrypticace, that worked for me.

kezkankrayon on 27 May 2017

Hey guys , same problem , laravel 6, latest version and i can make jquery out of the box using laravel mix , i tried all , the only way is injecting the cdn file o include the js.