framework: jQuery is not defined after migrating to Laravel 5.4

Try changing:

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

to

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

Same error in my fresh 5.4.21, I fixed it using:

1. delete window.$ = window.jQuery = require(‘jquery’) in bootstrap.js;
2. in webpack.mix.js add mix.webpackConfig({ resolve: { alias: { jquery: “jquery/src/jquery” } } });

thanks @devcircus ! after adding 'jQuery' to the autoload the extraction works as expected again.

after some recompilations the autoload directive randomly suddenly seemed to make a difference. threw some other errors before that - does webpack cache so hard that it needs several recompilations?

the order in which the extractions are defined doesn’t matter, right?

mix.js('resources/assets/js/app.js', 'public/js')
    .extract([
        'axios',
        'blazy',
        'bootstrap',
        'd3',
        'jquery',
        'js-cookie',
        'laravel-echo',
        'localforage',
        'localforage-startswith',
        'moment',
        'nvd3',
        'responsive-toolkit',
        'socket.io-client',
        'vue',
        'vue-echo',
        'vue-moment',
        'vue-strap',
        'vuedraggable'
    ])
    .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
    });

I have been experiencing this issue as well and I found myself the cause of the problem was “defer” attribute in script addition of app.js

<script src="{{ asset('js/app.js') }}" defer></script>

this “defer” tag was forcing script to load only after page was loaded. So I simply put the same attribute to the other js file addition as well where I needed jQuery and of course put it below the app.js addition.

This way both scripts loaded after page has completed loading and as app.js came before, it made jQuery available to my other script.

Maybe helps someone.

I am having the same issue with Framework 5.4.15, but the above fix does not work.

Boostrap etc is loaded at the end of the resources/views/layouts/app.blade.php you can place your scripts after this by adding your js that is reliant on jquery to a section in your view: @section('footer-js') <script> $(function() {alert('Jquery is defined and ready for service.');});</script> @endsection

then yield the section in your layout file AFTER the app.js declaration:

<script src="{{ asset('js/app.js') }}"></script> @yield('footer-js')

This way you can keep your js in your view and load it after Jquery is made available by app.js.

Thanks @tabirkeland, that did it for me! I’m no JavaScript wizard, could you explain why $ would be available globally but not jQuery, even though they are both being assigned to window?

I fixed by just removing “defer” from script tag. My laravel 5.7 installation included <script src="{{ asset('js/app.js') }}" defer></script> <— this tag, so i removed the defer as i mentioned before by just leaving <script src="{{ asset('js/app.js') }}"></script> like that… It fixed now =)

None of the above worked for me. I solved this issue by adding the following:

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

mix.autoload is supposed to do the same internally but it somehow isn’t working as expected for me. This is the only way I could extract Bootstrap without getting jQuery is not defined error.

P.S. found this here: https://stackoverflow.com/questions/49351415/laravel-mix-uncaught-referenceerror-jquery-is-not-defined

Yo all. I’ve just been playing about with this. My problem disappeared when I stopped trying to extract bootstrap’s into the vendor’s.js. I’m no js Supremo, but I’m guessing that’s where a lot of people’s problems might be coming from. It’s an obvious file to want to extract, It still looks like a bug to me, but hopefully that’ll help someone track it down a bit more accurately.

@luchaos autoload worked like charm for me 😃

@steve5287 I too was able to solve the $ reference error by removing defer however, I now have an error about Vue not being able to find #app

Did you run into this same issue?

UPDATE: Just moving things around, and putting <script src="{{ asset('js/app.js') }}"></script> at the end of my layout Blade, before the scripts section has solved both issues. Would still like to know how to get this working without modifying the vanilla templates, if possible.

Also, what is the underlying issue here? It seems rather odd that a vanilla Laravel app would have such difficulty using jQuery in a Blade template.

You can extract, but you’ll need to autoload as well if you’re using any scripts that expect it to be available globally.

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

Be sure to only call autoload once and include everything you need autoloaded. Subsequent calls to autoload seem to overwrite previous calls.

@tabirkeland solution did not work for me either. I researched Laravel Mix a bit, but didn’t want to head down that road just yet.

I found the file /public/js/app.js which appears to contain all of the required js, including jquery.

This appears to be built from /resources/assets/js/app.js by Laravel Mix webpack.mix.js (at my project root): mix.js(‘resources/assets/js/app.js’, ‘public/js’) .sass(‘resources/assets/sass/app.scss’, ‘public/css’);

I noticed that in /resources/views/layouts/app.blade.php the <script> tag <script src="{{ asset('js/app.js') }}"></script> was the last tag nested in the body tag.

I moved this <script> tag to the top of the body tag and this seems to have solved the problem.

@tabirkeland not work for me 😦 @mhulu please mention file location ? where we add this code. No idea about this file location.

@mhulu solution solved my issue.