jQuery $ not defined with L5.4 / Laravel Mix

[ux-engineer]

• Laravel 5.4.24
• Spark 4.0.11
• Chatter release/0.3

On Chatter pages am getting TypeError: $ is not a function from tinemce.js and chatter.js.

This seems to be Laravel Mix related issue but have tried many fixes for several hours without luck yet. Am posting this here as most likely some others will also encounter this error with Chatter if working with it, as there seems to have been several variations of this problem for these past months.

The problem seems to be related to that currently these Chatter's JS source files are not included in mix build process.

https://github.com/JeffreyWay/laravel-mix/issues/834 https://github.com/JeffreyWay/laravel-mix/issues/419

[ux-engineer]

Noticed that if you would you this syntax to reference jQuery, then it would work also for my situation:

jQuery(document).ready(function($) {

[ux-engineer]

Now got jQuery to be defined with $ or jQuery, when modifying mix config file, but still jQuery click event bind/handlers that are not doing anything... Seems to related to that the chatter layout contents are on a template that has Vue2 instantiated on it's parent element.

[ux-engineer]

This Laravel Mix config helped. It is a bit different than other that has been marked as solutions for other people's similar problems:

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

[defaultpage]

Some offtopic...

If anyone wants global jQuery

Add @envision's code and ./your/path/jquery-global.js with next:

import jquery from 'jquery';

window.jQuery = jquery;
window.$ = jquery;
window.jquery = jquery;

Example if need extract:

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

mix.extract(['jquery', './your/path/jquery-global.js'], './public_html/js/jquery.min.js');

[ghost]

@ArtemMolotov Thank you so much. This is the only thing that worked for me, depsite having tried all variants including 'jquery': ['$', 'window.jQuery', 'jQuery'].

[tylerwiegand]

@ArtemMolotov also the only thing that has worked for me. I can't fathom why, but the secret incantation you posted (without the mix.extract, not needed) worked for me.

[JohnTipping]

just incase anyone is having problems with this issue make sure your loading the manifest and the vendor scripts before your app script.

[MostafaAttia]

Hi guys, This problem is very simple, just remove the defer attribute when loading your app.js :

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

and it will just work.

This is because the defer attribute make app.js (and jquery inside) being loaded after the page is ready, other scripts, however, are loaded before the page/DOM is being ready.

[hummingbird-dev]

Saved my day!

[sribna]

Hi guys, This problem is very simple, just remove the defer attribute when loading your app.js :

Holy sh*t! Spent 4 hours playing with laravel-mix!

[ibakirov]

@ux-engineer your mix.autoload and @MostafaAttia removing defer in app.js saved my time too, thanks!

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