In this jQuery Laravel 9 Vite JS tutorial we will install jQuery in Laravel 9 with Vite JS and also learn to resolve uncaught referenceerror: $ is not defined in laravel vite. If you face or encounter errors you can always post a commmet to us we will reach you.
jQuery Laravel 9 Vite Vs Mix Overview
jQuery has been in use for a very long time and it’s one of the oldest JavaScript libraries still used extensively by the dev communities across the world. Using jQuery with Mix helps devs create amazing web apps. With the Laravel 9.1 and 9.2 update Vite replaced asset compiler Mix.Vite is a default asset builder in Laravel 9 not just a replacement for webpack Mix, rather rich with advanced features to create next level high-end web and mobile apps.
In this post we will install import jQuery in Laravel 9 with vite 3 and use it.
#1 jQuery Installing Using NPM
We will install jQuery using NPM. Go to Laravel App’s root and use this command:
npm install jquery --save-devNext we are choosing the –save-dev flag as all Laravel 9 node dependencies are installed
#2 Importing jQuery into Laravel 9 Project
Once we installed jQuery we are importing it in our bootstrap.js file where Laravel imported dependencies in. We could have imported jQuery anywhere, here we are adding it into lodash.
import $ from 'jquery';
window.$ = $;Next we are adding it to our window object to help us access jQuery directly into our Blade file whenever we need it.
This step is optional though, if you never intend on using jQuery directly in a Blade file and plan to use it in your app.js file only, then there is no need to add it to the window object.
#3 Using the Vite directive
Now jQuery is installed and imported, but we still won’t have access to it in our application. For that, we need to load our app.js script using the @vite Blade directive.
@vite('resources/js/app.js')
For this simple example, we are only loading our app.js asset. If you want to load your app.css asset as well, then you will have to use an array and load both.
@vite(['resources/css/app.css', 'resources/js/app.js'])#4 Using jQuery in Laravel Vite
We now have jQuery installed, imported, and loaded in our application. But how do we actually use it? Before we could access jQuery using the $ in a blocking inline <script> tag.
If you try to do that now, it will result in the following console error.
Uncaught ReferenceError: $ is not definedHow can we avoid uncaught referenceerror: $ is not defined? For this we need to understand the way browsers load JavaScript modules which is the same as Laravel loads JavaScript with Vite and its utility.
These modules defer by default the script contains an inline script tag at its bottom <body> and it triggers before loading JavaScript modules. As we see here our browser’s not loaded in our app.js module until now, as a result jQuery is also not added to the window object we will try to access it before uncaught referenceerror: $ invokes.
#5 jQuery Inline Scripts Loading Issue
If you are wondering can we use jQuery with inline script or not, you’d know we totally can but for that our inline <script> tag has to be a JavaScript module as well that fixes its loading issue. That also defines how we need to use jQuery inline scripts loading issue.
Now we need to open our welcome.blade.php view, just next to vite directive call add this line of code:
<script type="module">
$('body').html('<h1>jQuery Laravel Vite JS</h1>');
</script>Now when we load our landing page, we should see the words – jQuery Laravel Vite JS
#6 Accessing jQuery in App.js
So when we have to access jQuery in our app.js we need to use $ and execute it as shown below:
$(() => {
setTimeout(() => {
alert('jQuery triggered via app.js')
}, 2500);
});This is more like testing JavaScript in the same way as it sets the timer that invokes alert we added in the above code line.
We have made two distinctive access jQuery calls to show how to access jQuery in different situations. Now we are using the following command to build our assets.
npm run buildIt will make our site accessible and the Laravel default page is replaced with ‘jQuery Laravel Vite JS’ and the alert has to go on after 2 seconds
Now you know how to install, import, and where using jQuery Laravel 9Â Vite JS tutorial ends and this way we learned to import install jQuery to a new Laravel 9 and Vite project and access it whenever we need it as well as resolving uncaught referenceerror: $ is not defined laravel vite.
