Laravel 7.x Uncaught ReferenceError: $ is not defined

user_2179062 0
Viewed 4030

I am using Larave 7.x version. To test JQuery, I put the following Code at the end inside body tag in welcome.blade.php

<script type="text/javascript">
    $(document).ready(function () {
        alert('JQuery is ready!');
    });
</script>

It throws the following error...

Uncaught ReferenceError: $ is not defined at ...

Then I deleted deffer from the script.

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

Now JQuery is Ok. But it throws the following error...

[Vue warn]: Cannot find element: #app

The matter is that, I can use either JQuery or Vue but not the both.

Is there any way to use both JQuery and Vue at the same time?

laravel-7 vue.js jquery
3 Answers

I found the solution like this...

<script>
    document.addEventListener('DOMContentLoaded', function () {
        // Your jquery code            
        alert('JQuery is ready!');            
    });
</script>
user_21790620

I encountered the same error, but adding this line to your app.js should fix it:

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

I was having exactly the same issue, my solution was to create a new js file (test.js) with the code using jQuery, added to webpack.mix.js, and imported on welcome.blade.php:

welcome.blade.php

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

webpack.mix.blade

mix.js('resources/js/app.js', 'public/js')
    .js("resources/js/test.js", "public/js")
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

test.js

$(() => {
    alert('JQuery is ready!');
})
user_68513110
Related