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? — juicy-g
– juicy-g, Commented Jul 17, 2022 at 15:53

shanecp · Accepted Answer · 2022-08-02 08:44:35Z

40

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>

answered Aug 2, 2022 at 8:44

shanecp

89111 silver badges16 bronze badges

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

2 Comments

Neha Over a year ago

I would suggest the person who posted this question to mark this answer as correct. It really helped!

yaddly Over a year ago

Thank you for the explanation, I was wondering why I was getting the error despite setting things up correctly. I struggled for days with this error and I'm glad you curated this solution and explanation.

Nurzaly Abd Rahman · Accepted Answer · 2023-04-11 13:42:16Z

8

add type = module in tag script

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

answered Apr 11, 2023 at 13:42

Nurzaly Abd Rahman

1111 silver badge4 bronze badges

Comments

Rahul Thakkar · Accepted Answer · 2024-02-27 07:09:06Z

4

I was facing same issue while generating DataTable using jquery datatable plugins with vite in laravel 10, fixed by

Assigning $ to the window object in app.js
Adding module in script declaration.

resources/js/app.js

import $ from 'jquery';
window.$ = $; // this worked for me
import 'datatables.net';

resources/views/users/index.blade.php

<script type="module">
    $(document).ready(function() {
        $('#websites-table').DataTable({
            // Your code
        });       
    });
</script>

answered Feb 27, 2024 at 7:09

Rahul Thakkar

815 bronze badges

Comments

Mohammad Rofik · Accepted Answer · 2023-02-16 23:05:51Z

-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, 2023 at 23:05

Mohammad Rofik

12 bronze badges

1 Comment

Surya Over a year ago

Some people are using webpack or vite, so this solution is probably not relevant.

Collectives™ on Stack Overflow

ReferenceError: $ is not defined, Jquery Import with vite

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related