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

Profile

footer text

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

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.

Answers(1) :

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>

Questions & Answers