Jquery only working when I code in the `app.js` file with Laravel

Question

I have this issue with jquery, I want to be able to use it anywhere in my application. I have installed it using npm install jquery and have imported it in my app.js file like this:

import $ from "jquery";
window.$ = $;

And in my livewire component, I have this code:

@push('scripts')
    <script>
        $(function () {
            alert("Hello");
        });
    </script>
@endpush

With this code, I get the following error: Uncaught ReferenceError: $ is not defined

And finally, I have this in my blade layout file:

@livewireScripts
<script src="{{ mix('js/app.js') }}"></script>
@stack('scripts')

This code is working only if I put it in the app.js file.

haruk1515 · Accepted Answer · 2023-01-23 15:15:26Z

2

try replacing your import with this one:

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

credit: How to use JQuery in Laravel (NPM) Ikbel

if this didn't work, try adding an event of loading:

<script>
window.addEventListener('load', function() {
    $(function () {
        alert("Hello");
    });
</script>

answered Jan 23, 2023 at 15:15

haruk1515

4484 silver badges13 bronze badges

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

4 Comments

AzafoCossa Over a year ago

I'm getting the same error!

haruk1515 Over a year ago

try adding the jquery cdn on your layout and see if it works:

<script 			  src="https://code.jquery.com/jquery-3.6.3.min.js" 			  integrity="sha256-pvPw+upLPUjgMXY0G+8O0xUf+/Im1MZjXxxgOcBQBXU=" 			  crossorigin="anonymous"></script>

(just to test)

haruk1515 Over a year ago

if it works, maybe the installation you made of jquery on laravel is not correct. when you run npm install jquery, did you use npm run development or npm run dev?

AzafoCossa Over a year ago

Jquery works, but only when I write scripts in app.js where I import jquery.

Collectives™ on Stack Overflow

Jquery only working when I code in the `app.js` file with Laravel

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related