Question 37351 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Use Jquery in Laravel Vite

I get an error when try to import jquery in laravel VITE, jquery seems to be loaded in my compiled javascript:

       Uncaught TypeError: window.$ is not a function
    at dashboard:1823:12
(anonimo) @ dashboard:1823
[Violation]Forced reflow while executing JavaScript took 72ms
dashboard:101 
 
        
       Uncaught Error: Bootstrap's JavaScript requires jQuery
    at app.0bbf2228.js:50:31

App.js is:

import vue from "vue";
window.Vue = vue;


import jQuery from 'jquery'
window.$ = jQuery;

import './bootstrap';
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Found an answer here:

    This is because jQuery when imported in an ESM context considers itself in non-global mode and therefore does not put $ on window, but bootstrap is eagerly initialized on import and expects $ to be available on window.

    This is unfortunately a case where jQuery and Bootstrap were designed without ESM in mind so they rely on implicit global coupling to work.

    – Evan You on the GitHub bug report

    https://www.mapledesign.co.uk/tech-blog/vite-bootstrap-4-jquery/


  2. 0

    jQuery does support ESM, it’s stated in the README on their npm package page, scroll to the Including jQuery section, and babel.

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

    What is most likely the issue is you are trying to access $ on the window object before it has been loaded in. Laravel loads its scripts as JavaScript modules which are deferred by default.

    So if you’re trying to access jQuery using a blocking inline <script> tag, jQuery won’t be available when the browser executes that JavaScript.

    If you want to use jQuery in inline <script> tags, then use inline JavaScript modules instead, and add them after your @vite Blade directive.

    @vite('resources/js/app.js')

<script type="module">
$('h1').text('Hello, World')
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search