Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Lars-Janssen's avatar

Jquery undefined with elixir

Hi,

I use Laravel Elixir. I want to include Jquery but in my console I receive Uncaught ReferenceError: jQuery is not defined.

This is how my gulp file looks like:

elixir(function(mix) {
    mix.browserify('main.js')
    .styles([
        './node_modules/normalize.css/normalize.css',
        './node_modules/nprogress/nprogress.css',
        './node_modules/sweetalert/dist/sweetalert.css',
        './node_modules/animate.css/animate.min.css'
    ], 'main.css');

    mix.scripts([
        './node_modules/jquery/dist/jquery.min.js',
    ], 'main.js');
});

I've checked the path:

./node_modules/jquery/dist/jquery.min.js

And the file is there. I also included this in my index.html:

<script src="/js/main.js"></script>

I've compiled everything. What could be wrong?

0 likes
4 replies
ejdelmonico's avatar

Try using the unminifed jquery version to mix and see if you get the same results.

nate.a.johnson's avatar

jQuery likes to be in a global namespace. You might try something like this in an entry point javascript file.

window.$ = window.jQuery = require('jquery');
ejdelmonico's avatar

As Nate said above. That code should be defined in the bootstrap.js file located in resources/assets/js/bootstrap.js. It is defined that way out of the box in 5.3.

1 like
nate.a.johnson's avatar

Yep, if you're not using Laravel 5.3, you should definitely take a look at a new project. It has a really nice JavaScript setup ready for Vue and Bootstrap. The elixir files are much simplified too. If you project is easy to upgrade, it might be worth it.

Please or to participate in this conversation.