ReferenceError: $ is not defined, Jquery Import with vite

Question

I tried with fresh install laravel 9.20 and with minimum configuration

in vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/js/app.js',
            ],
            refresh: true,
        }),
    ],
});

in app.js

import './bootstrap';

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

import '../sass/app.scss';

i have tried with this too

import * as $ from "jquery";
window.$ = window.jQuery = $;

load the assets in blade and i test with this script

@vite(['resources/js/app.js']);

$("#alertbox").alert("test");

but i get the following error in the console:

Uncaught ReferenceError: $ is not defined

I can't make it work, please help

Does this answer your question? [How to import jquery using ES6 syntax?](https://stackoverflow.com/questions/34338411/how-to-import-jquery-using-es6-syntax) — juicy-g, Jul 17 '22 at 15:53

score 20 · Answer 1 · answered Aug 02 '22 at 08:44

This happens because of Vite's module loading order. You're seeing a race condition, and it's not an issue with the import.

To confirm this, try calling the jQuery code after a timeout as below.

<script>
   setTimeout(function() {
      console.log($);
      $("#alertbox").alert("test");
   }, 5000);
</script>

If there's no error with the above, then it means the code is getting executed in the incorrect order. But adding a timeout is not a good way to solve it, so let's look at the cause of the problem.

If you look at source code you'll see something like this.

<script type="module" src="http://localhost/build/assets/app.342432.js"></script>

This means Vite is loading scripts as modules. And module scripts are always deferred. So if your jQuery script is placed after Vite directive, jQuery code is executed first, before loading jQuery to window - this triggers $ is undefined error.

In best practise, you should move the jQuery code to app.js file, so it stays in it's own module. The other way to handle this is to mark your script tag as a module, then it'll follow the loading order of the document.

Change the script tag as below.

@vite(['resources/js/app.js']);

<script type="module">
   $("#alertbox").alert("test");
</script>

I would suggest the person who posted this question to mark this answer as correct. It really helped! — Neha, Apr 21 '23 at 08:07

score 4 · Answer 2 · answered Apr 11 '23 at 13:42

4

add type = module in tag script

<script type="module">
    code....
</script>

answered Apr 11 '23 at 13:42

Nurzaly Abd Rahman

71
4

score -3 · Answer 3 · answered Feb 16 '23 at 23:05

-3

add jquery from cdn in the blade template

https://cdnjs.com/libraries/jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

and solve it

answered Feb 16 '23 at 23:05

Mohammad Rofik

1
2

Some people are using webpack or vite, so this solution is probably not relevant. – Surya May 31 '23 at 04:24

ReferenceError: $ is not defined, Jquery Import with vite

3 Answers3

Linked