Add jQuery on laravel 5.4 mix

Question

I'm already familiar with laravel 5.1 mix (elixir), and recently I decided to test laravel 5.4 mix.

I mixed my libs on vendors files.

mix
.styles([
    './node_modules/bootstrap/dist/css/bootstrap.css',
    './node_modules/font-awesome/css/font-awesome.css'
], 'public/css/vendor.css')
.js([
    './node_modules/jquery/dist/jquery.js',
    './node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js/vendor.js')
.disableNotifications()
.version();

And included vendor on my page.

<script src="{{ mix('js/vendor.js') }}" type="text/javascript" charset="utf-8" async defer></script>

But, when I want use jQuery I have this error on image below. Before, in the laravel 5.1 I did exactly that way.

enter image description here

What do I have to do?

Gonzalo Faus · Accepted Answer · 2017-05-24 06:05:50Z

23

Just uncomment this line in your assets/js/bootstrap.js file:

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

And make sure to require the bootstrap file in your assets/js/app.js like this:

require('./bootstrap');

answered May 24, 2017 at 6:05

Gonzalo Faus

4645 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pat64j · Accepted Answer · 2017-03-22 17:29:34Z

9

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

I had to add this to my webpack.mix.js

answered Mar 22, 2017 at 17:29

pat64j

1,1518 silver badges9 bronze badges

3 Comments

pat64j Over a year ago

For it to work, your resources/assets/js/bootstrap.js must be required. and the following line must be present in it. 'window.$ = window.jQuery = require('jquery');'

Parziphal Over a year ago

IMO this is the correct answer. The array is a list of variables that will have to match exactly in order for Webpack to include the module on the file that it's called. For example, Bootstrap won't work with the array in the answer because Bootstrap checks for the variable jQuery (window.jQuery isn't the same as jQuery, it has to be exact); adding jQuery to the array will make Bootstrap work.

Anadi Misra Over a year ago

mix.autoload is definitely the better way here since we dealing with web pack wrapped by laravel-mix

markcanals · Accepted Answer · 2018-11-08 13:02:52Z

2

The solution using laravel mix is force all modules to use the same jquery version: This is my code at top of webpack.mix.js:

mix.webpackConfig({
    resolve: {
        alias: {
             'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    }
});

answered Nov 8, 2018 at 13:02

markcanals

811 silver badge2 bronze badges

Collectives™ on Stack Overflow

Add jQuery on laravel 5.4 mix

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related