Laravel 5 WebPack JQuery - $ is not defined

Question

I Have webpack.min.js:

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

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();

and package.json:

"devDependencies": {
    "jquery": "^3.3.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }

and in my blade footer script:

@section('footer')
    <script type="text/javascript">
        if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }

        $(function() {
        $('#cc-number').validateCreditCard(function(result) {
            $('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
                + '<br>Valid: ' + result.valid
                + '<br>Length valid: ' + result.length_valid
                + '<br>Luhn valid: ' + result.luhn_valid);
        });
        });
    </script>
@endsection

after i run npm run dev and load my page, i receive error:

Uncaught ReferenceError: $ is not defined

and my alert(jQuery.fn.jquery); is not triggered

how do i load jquery from npm so then i can use it at inline html code in blade?

frzsombor · Accepted Answer · 2019-04-14 22:03:10Z

27

in app.blade.php

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

remove defer so make it

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

https://github.com/laravel/framework/issues/17634#issuecomment-375473990

edited Apr 14, 2019 at 22:03

frzsombor

2,6102 gold badges27 silver badges45 bronze badges

answered Apr 14, 2019 at 18:56

Ahmed Aboud

1,34218 silver badges22 bronze badges

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

3 Comments

Pathros Over a year ago

What is that defer for?

O.S.Kaya Over a year ago

defer means that the script will only get loaded when everything else is loaded

sohal07 Over a year ago

landed here after wasting half a day to find the solution. Thanks, it worked like a charm.

Odyssee · Accepted Answer · 2018-07-30 14:11:39Z

23

Try this in your main.js file

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

answered Jul 30, 2018 at 14:11

Odyssee

2,4612 gold badges24 silver badges38 bronze badges

4 Comments

AnD Over a year ago

which main.js file? in here: resources/assets/scripts/index.js?

AnD Over a year ago

anyway, adding global.$ = global.jQuery = require('jquery'); in resources/assets/scripts/index.js solve the problem - Thanks!

Martin Over a year ago

For others finding this topic using Laravel 5.8: If you have a <script src="{{ asset('js/app.js') }}" defer></script> tag in your app.blade.php, just move it to the end of your body tag and remove the defer statement. This should solve the problem and still work fine with vue.js

TrueStory Over a year ago

^ Underrated solution. I spent HOURS dicking around with adding windows.$ =... throughout my JS files, it was still not available in blade. THIS fixed it.

racl101 · Accepted Answer · 2019-03-15 21:16:33Z

10

I had this issue in Laravel 5.7 when I tried using some of the default views that it provided. I was trying to use JavaScript (which required using jQuery) in some blade view templates that extended the default layout/app.blade.php template.

But for me the problem was not the window.$ not being assigned the window.jQuery library, because it was being added as far as the resources/js/bootstrap.js file was concerned. (This is a file that appears to be precompiled into public/js/app.js by Laravel Mix. You can see this is the case by looking into webpack.mix.js, within it, you'll find this statement:

mix.js('resources/js/app.js', 'public/js')

where

resources/js/app.js requires resources/js/bootstrap.js .

If you wish to manually compile this for yourself first run:

npm install then npm run dev when in development mode, or npm run prod when in production mode.

but anyways (I've digressed) ....

It turned out that the issue was here:

resources/views/layouts/app.blade.php

There was an instance of script tag with a defer attribute like so:

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

That defer attribute was causing all the problems.

So I removed it like so:

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

and the problem of jQuery not being defined was solved.

I prefer to defer my JavaScript loading by simply moving the script tags closer to the end of body HTML tag anyways.

edited Mar 15, 2019 at 21:16

answered Mar 15, 2019 at 21:07

racl101

4,1204 gold badges38 silver badges34 bronze badges

2 Comments

Martin Over a year ago

that defer statment seems to be necessary if you use Vue.js. If you just move the <script> tag to the end of your <body> tag, it will work fine as well. Not sure why they put it up there

Pathros Over a year ago

In my case it was causing problems, even if I had already put the script tag at the end of the body. What exactly is that defer for?

Денис Кисель · Accepted Answer · 2019-10-07 09:37:08Z

3

I use mix.copy instead mix.js for jQuery and it works great!

example:

mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');

answered Oct 7, 2019 at 9:37

Денис Кисель

312 bronze badges

1 Comment

Konsortium ICT Pantai Timur Over a year ago

Then add <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script> before </body>

Collectives™ on Stack Overflow

Laravel 5 WebPack JQuery - $ is not defined

4 Answers 4

3 Comments

4 Comments

but anyways (I've digressed) ....

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

but anyways (I've digressed) ....

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related