Laravel 5.5 ReferenceError: $ is not defined

Question

For some reason my jQuery refuses to load. I am getting an error:

ReferenceError: $ is not defined

My template is in views/layouts/editor.blade.php and I am loading jQuery in the head of my template like this

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

I can see that jQuery is loaded in my console. but still I get the error.

I am compiling my javascript using laravel mix and my webpack.mix.js file looks like this:

// javascript
mix.js('resources/assets/js/app.js', 'public/js')
   .js('node_modules/jquery/dist/jquery.min.js', 'public/js')
   .autoload({
        jquery: ['$', 'window.jQuery', 'jQuery'],
    });
// css
mix.sass('resources/assets/sass/app.scss', 'public/css')
   .sass('node_modules/bootstrap/scss/bootstrap.scss', 'public/css');

Why is this happening?

EDIT:

My template file looks like this:

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
    <head>

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- CSRF Token -->
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <title>{{ config('app.name', 'Laravel') }}</title>
        <!-- Styles -->
        <link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
        <link href="{{ asset('css/app.css') }}" rel="stylesheet">
        <!-- scripts -->
        <script src="{{ asset('js/jquery.min.js') }}"></script>

        <script>
            $(function(){
                alert();
            });
        </script>

    </head>
    <body>


        @yield('content')

        <!-- Scripts -->

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

    </body>
</html>

If I look in my console I see the following

If I open the jquery.min.js file in a new tab I see the following:

So it's jquery underneath all that webpack boilerplate stuff.

I have also run npm run production which removes all that webpack stuff and leaves the raw jquery.

"I can see that jQuery is loaded in my console. but still I get the error." - What else can you see in your browser's debugging tools? If you put a breakpoint on that line, is $ defined there? Is your jQuery library broken in some way? Are you loading jQuery after trying to use it? Loading it in a different or more confined scope? The error is what it is... $ is not defined. Can you provide a complete but minimal example to demonstrate the problem and indicate why in that example it should be defined? — David
– David, Commented Oct 25, 2017 at 17:56
I have no idea what the autoload method does. I assume it's binding jquery to variables. Depending on how you're using jQuery, perhaps you want to try binding it to window as well, like window.jQuery. — Jonathan
– Jonathan, Commented Oct 25, 2017 at 17:57

Jason · Accepted Answer · 2017-10-26 05:14:26Z

6

Try this. In your view file create a section under content section

@section('scripts')

<script src="{{ asset('js/jquery.min.js') }}"></script>
<script>
       $(function(){
            alert();
        });
</script>
<script src="{{ asset('js/app.js') }}"></script>

@endsection

Then @yield('scripts') just under the @yield('content') in your template file. So its looks like

    <body>

        @yield('content')

        <!-- Scripts -->

       @yield('scripts')

    </body>

answered Oct 26, 2017 at 5:14

Jason

3151 gold badge4 silver badges11 bronze badges

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

1 Comment

Halfacht Over a year ago

I have the script tags that load the jquery assets / CDN in my header. adding the 'section' in the layout and the 'yield' in the template did the trick.

Sóstenes Dias Jr · Accepted Answer · 2019-02-18 19:24:37Z

3

Use mix.combine() instead mix.js() :

mix.combine([
    'node_modules/jquery/dist/jquery.js',
    'node_modules/bootstrap/dist/js/bootstrap.min.js'
],'public/js/outputFile.js');

answered Feb 18, 2019 at 19:24

Sóstenes Dias Jr

513 bronze badges

1 Comment

JasonJensenDev Over a year ago

This answer helped me out, thanks! But I'm not sure what the difference is between mix.combine() and mix.js(). I can't seem to find it in the Laravel documentation. Could you point me in the right direction?

Jethro Hazelhurst · Accepted Answer · 2017-10-26 11:56:53Z

1

The problem is that I was compiling my jquery from the node_modules/jquery/dist folder instead of the /src folder.

answered Oct 26, 2017 at 11:56

Jethro Hazelhurst

3,2957 gold badges43 silver badges85 bronze badges

Collectives™ on Stack Overflow

Laravel 5.5 ReferenceError: $ is not defined

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related