jQuery autoloading apparently not working

• Laravel Mix Version: 0.9.2
• Node Version (node -v): v6.9.5
• NPM Version (npm -v): 3.10.10
• OS: VM Homestead

Description:

I can’t load jQuery using laravel-mix. I’ve added this snippet to webpack.mix.js :

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

as shown here: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/autoloading.md

In any blade template, I can add something like this

<script>
    $(document).ready(function () {
        alert("jQuery loaded");
    });
</script>

But the $ is not recognised (browser error: ReferenceError: Can't find variable: $)

In case it was an issue with the setup of my project, I’ve created a new laravel project from scratch, and I have the same issue.

Steps To Reproduce:

laravel new testsite edit welcome.blade.php and add the script snippet mentioned above npm run dev open testsite, browser shows error mentioned above

[MladenJanjetovic]

Be careful with script defer attribute also. That will make your autoloaded jQuery unavailable in blade files

[jnanin]

@MladenJanjetovic the whole setup seems confusing to me as a Laravel newcomer, but the way I finally made it work correctly was:

1. Loading my external js files that need JQuery with Mix (file webpack.mix.js). Example:

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

mix.js(['resources/assets/js/app.js', 'a-module-path/a-jquery-dependant-script.js'], 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

That way, $ is available later on when you require it in a blade template.