Laravel mix Uncaught ReferenceError: jQuery is not defined

jquery laravel laravel-mix

11,185

Solution 1

According to this answer you need to import jquery this way

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

Solution 2

before:

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

after:

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

in layout worked for me.

11,185

Author by

PaladiN

Updated on June 15, 2022

Comments

PaladiN almost 2 years

I am using laravel mix to bundle my js libraries and codes. I am trying to use ES6 style of importing and use ES6 codes if possible. I need to also import jQuery and it's library.

So, i have imported jQuery and bootstrap like this:

import "jquery";
import "bootstrap";

At first when i import them i was getting:

Uncaught ReferenceError: jQuery is not defined
    at Object../node_modules/bootstrap/js/transition.js (vendor.js?id=74f7f0c463b407c6bdf5:2449)

which is due to the bootstrap not getting jQuery.

To solve this i have added this configuration to replace $, jQuery with jquery

mix.webpackConfig(webpack => {
    return {
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
            })
        ]
    };
});

This works for every scripts and libraries that requires jQuery.

Now the problem is with the other scripts that we add without mixing using a single js or using blade section.

@section('scripts')
    <script type="application/javascript">
        window.onload = function() {
            if (window.jQuery) {
                // jQuery is loaded
                console.log("Yeah!");
            } else {
                // jQuery is not loaded
                console.log("Doesn't Work");
            }
        }
       $().ready(function () {
        console.log('works');
      })
    </script>
@endsection

The console error shows:

datatables:125 Uncaught ReferenceError: $ is not defined
    at datatables:125
(anonymous) @ datatables:125
vendor.js?id=2b5ccc814110031408ca:21536 jQuery.Deferred exception: $(...).uniform is not a function TypeError: $(...).uniform is not a function
    at HTMLDocument.<anonymous> (http://localhost/assets/admin/app.js?id=da888f45698c53767fca:18419:18)
    at mightThrow (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21252:29)
    at process (http://localhost/assets/admin/vendor.js?id=2b5ccc814110031408ca:21320:12) undefined
jQuery.Deferred.exceptionHook @ vendor.js?id=2b5ccc814110031408ca:21536
process @ vendor.js?id=2b5ccc814110031408ca:21324
setTimeout (async)
(anonymous) @ vendor.js?id=2b5ccc814110031408ca:21358
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
fire @ vendor.js?id=2b5ccc814110031408ca:21124
fire @ vendor.js?id=2b5ccc814110031408ca:20986
fireWith @ vendor.js?id=2b5ccc814110031408ca:21116
ready @ vendor.js?id=2b5ccc814110031408ca:21596
completed @ vendor.js?id=2b5ccc814110031408ca:21606
datatables:122 Doesn't Work
vendor.js?id=2b5ccc814110031408ca:21545 Uncaught TypeError: $(...).uniform is not a function
    at HTMLDocument.<anonymous> (app.js?id=da888f45698c53767fca:18419)
    at mightThrow (vendor.js?id=2b5ccc814110031408ca:21252)
    at process (vendor.js?id=2b5ccc814110031408ca:21320)

The problem gets solved when i compile and mix the scripts using laravel mix but when i write same scripts in the blade or use without mixing it shows the jQuery / $ is not defined error.

What is the best way in this case?

The master page looks like this:

<body>
    @yield('body')

    <script src="{{ mix('/assets/admin/manifest.js') }}"></script>
    <script src="{{ mix('/assets/admin/vendor.js') }}"></script>
    <script src="{{ mix('/assets/admin/app.js') }}"></script>

    @section('scripts')
    @show

    @yield('footer')
</body>