Laravel-mix: Cant launch jquery

[sdsRepositariy]

Hello!
I know that it is not the new issue but I really stuck with jquery extraction with laravel mix. I like the idea of code splitting between vendors and app features so I tried to follow for all standard instruction described by Laravel-mix developer. But I still cant share jquery across my project via laravel mix. I would very appreciated for any suggestion regarding follow case:
My webpack.mix.js is:
mix.js('resources/assets/js/app.js', 'public/js')f
.extract(['jquery', 'bootstrap-sass', 'lodash'])
.autoload({
jquery: ['$', 'window.jQuery', 'jQuery'],
})
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
processCssUrls: false
});
Described in the laravel-mix manual sets of scripts (manifest, vendors, app) included at the end of HTML before “”.
I tried to make the JQuery global via window.$ = window.jQuery = $; in the bootstrap.js as well as other variants but it doesn’t recognize $ or (jQuery) in my code.

[ankurk91]

But I still cant share jquery across my project via laravel mix.

Do you get any error ?

[sdsRepositariy]

But I still cant share jquery across my project via laravel mix.

Do you get any error ?

The error Is "ReferenceError: $ is not defined". The error happens for scripts placed before ‘vendor’ script. So I think I need to either cleanup my HTML or leave jQuery somewhere on the top

[ankurk91]

You can not use jQuery in your blade template like this.

<script src="js/app.js"/>
<script>
// $ is not accessible outside your app js
$("#some-id").show();
</script>

[sdsRepositariy]

You can not use jQuery in your blade template like this.

<script src="js/app.js"/>
<script>
// $ is not accessible outside your app js
$("#some-id").show();
</script>

OK. its clear, thanks!

[avrahamm]

I didn't succeed to use jQuery in blade with laravel 5.7 but only by directly downloading by

No mix option helped.
But yet, I see package.json contains jquery, it is fetched.
Is it possible to use it not by direct downloading?
Thanks

[filipkrstic]

For @sdsRepositariy and @avrahamm

You can try to do next:

1. Remove window.$ = window.jQuery = require('jquery'); from bootstrap.js
2. Edit your webpack.mix.js like this:

const mix = require('laravel-mix');

mix.webpackConfig({
   externals: {
      jquery: 'jQuery'
   }
});

// Modify this to fit your needs
mix.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js',  'public/js')
.extract();

1. Now, you are able to load jQuery globally. For example in master/layout file (app.blade.php):

<!-- Load jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- If it fails to load, use local copy of jQuery -->
<script>window.jQuery || document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>');</script>

<!-- JS u got after extraction by Laravel Mix -->
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script> 
...
<script src="/js/app.js"></script>

If you need more speed you can try to optimize this with Rocket Loader (Cloudflare).

Best wishes

[sdsRepositariy]

I didn't succeed to use jQuery in blade with laravel 5.7 but only by directly downloading by

No mix option helped.
But yet, I see package.json contains jquery, it is fetched.
Is it possible to use it not by direct downloading?
Thanks

The package.json has project dependencies which uses Lavarel-mix.
As I understood there are a few options for Jquery connection:

• use a CDN (like you probably did)
• save Jquery e.g. in you JS folder and connect to the project via somewhere in you tag
• install Jquery in you node-modules directory and use Lavarel-mix to either copy it to particular directory, compile to Vendor.js (like recommended by Laravel-mix docs) etc.

Best regards

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[tgeorgel]

For @sdsRepositariy and @avrahamm

You can try to do next:

1. Remove window.$ = window.jQuery = require('jquery'); from bootstrap.js
2. Edit your webpack.mix.js like this:

const mix = require('laravel-mix');

mix.webpackConfig({
   externals: {
      jquery: 'jQuery'
   }
});

// Modify this to fit your needs
mix.sass('resources/sass/app.scss', 'public/css')
.js('resources/js/app.js',  'public/js')
.extract();

1. Now, you are able to load jQuery globally. For example in master/layout file (app.blade.php):

<!-- Load jQuery from Google CDN -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- If it fails to load, use local copy of jQuery -->
<script>window.jQuery || document.write('<script src="/js/jquery-3.3.1.min.js"><\/script>');</script>

<!-- JS u got after extraction by Laravel Mix -->
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script> 
...
<script src="/js/app.js"></script>

If you need more speed you can try to optimize this with Rocket Loader (Cloudflare).

Best wishes

Perfect, it works like a charm, thanks !