jQuery is not defined after migrating to Laravel 5.4

[DominiqueFERET]

• Laravel Version: 5.4.6
• PHP Version: 7.0.13

Description:

After migrating to Laravel 5.4 => javascript bug => ReferenceError: jQuery is not defined
(With Elixir in 5.3 everything works fine.)
This variable is defined in asset/js/bootstrap.js
window.$ = window.jQuery = require('jquery');
in javascript console, i see "$" is correctly defined and a variable name jQuery311052537473254022181 is define...

Seem to be a suffix added ... A bug of wepack config of laravel.mix ???

Steps To Reproduce:

Make a simple javascript closure like
function()({ ... })(jQuery);

then compile assets with command "npm run dev" (same thing with npm run production).

When you try the javascript closure => jQuery is not defined.

[tabirkeland]

Try changing:

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

to

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

[reinink]

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?

[rappasoft]

I also had this same problem and the above fixed.

[joval-sv]

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

[nejtr0n]

Same issue. Fix does not work =(

[mhulu]

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"
   }
   }
   });

[mailnike]

This issue is not yet resolved. Not sure why this was closed?

[gustav1105]

If this is happening inside a child vue component you can add this to that component script and it will work
window.$ = window.jQuery = require('jquery');

[Christophvh]

@mhulu solution solved my issue.

[shahzadm287]

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

@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]

All, Mix has been updated extensively since my solution was posted. I would suggest going with @mhulu solution by modifying your webpack.mix.js and aliasing JQuery.

[Sam-WWHC]

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.