CODEWITHSUNDEEP
phpjquerylaravel
Felipe Mathais
Felipe Mathais

Reputation: 165

Add jQuery on laravel 5.4 mix

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?

Upvotes: 16

Views: 25237

Answers (3)

markcanals
markcanals

Reputation: 71

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

Upvotes: 2

Gonzalo Faus
Gonzalo Faus

Reputation: 464

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');

Upvotes: 23

pat64j
pat64j

Reputation: 1121

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

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

Upvotes: 9

Related Questions