Level 102
What is the line throwing the error? Is it in app.js?
Sep 17, 2022
25
Level 17
Adding jQuery to Laravel 9 vite is a pain
Hi i have searched a lot but still have the err
dashboard:184 Uncaught ReferenceError: $ is not defined
this what I have tried vite.config
export default defineConfig({
plugins: [
laravel({
input: ["resources/css/app.css", "resources/js/app.js"],
refresh: true,
}),
],
resolve: {
alias: {
$: "jQuery",
},
},
});
app.js
import jQuery from "jquery";
window.$ = window.jQuery = jQuery;
and I have this in app.blade.php
<!-- Scripts -->
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
and ofcourse
npm run dev
Level 17
@Sinnbeck Could not know but first line that use the dollar of jquery will throw the err because there is no jquery with vite
Level 73
I think you need to ask yourself, "Why do I even need to install jQuery?".
If you are strictly using jQuery in your project, you really don't need to run vite on it.
1 like
Level 17
@Tray2 Datatables.net
Level 17
@Tray2 I already worked with l9 which is a mistake of mine because I do not know that jquery will refuse to install :(
Level 75
@lifesound You can still use laravel mix.
https://github.com/laravel/vite-plugin/blob/main/UPGRADE.md#migrating-from-vite-to-laravel-mix
1 like
Level 17
@MichalOravec Yes bit i am afraid to shift
Level 122
Just add a line to load jquery. You don't need to even think about vite.
1 like
Level 17
@Snapey where ?
Level 27
@lifesound In whatever file defines your HTML header. Same way you’d add a line to load any other custom or external JavaScript (or CSS).
Vite is used to create certain assets (app.js and app.css, primarily) that you then reference in the HTML file that’s sent to your browser, by taking the legible JavaScript and CSS code you write and minifying it. But jQuery is not your code, and you’d normally load it pre-minified from a CDN, so Vite doesn’t need to get involved at all.
1 like
Level 17
@kokoshneta I am using cdn but client wants it embeded
Level 17
is not i didi that above import jQuery from "jquery";
Level 27
@lifesound Your client wants all of jQuery embedded into the generated app.js file? Why on earth would they want that?
Level 17
@kokoshneta hesitation about security and performance
Level 122
@lifesound download the minified jquery file and load it from a local public folder. Pretend you never heard of vite. No build step is required.
2 likes
@Snapey then do we have to do the same for other libraries as well? I'm trying to set up admin-lte with laravel 9 + vite which is a real pain in the a**.
Level 5
@lifesound did you figure out how to package jquery with vite? I ran into the same issue and i'm manually loading jquery before app.js in my html
<script src="{{ asset('js/jquery.js') }}"></script>
@vite(['resources/js/app.js','resources/js/custom/custom.js'])
I also have other libraries like vanillajs-datepicker that i'm installing with npm but i'm can't seem to load to compile it with vite.
I wonder if using vite you will have to load every library independently in your html. It defeats the purpose of using one single file for your js and css.
1 like
Level 1
Hi! You just need to add the type="module" to the script tag that is going to use jquery
It worked for me
@Alaneta would you mind giving an example or something? I tried adding type="module" as below but didn't work. :(
@vite(['resources/js/app.js'])
<script type="module">
$(function () {
console.log('Hey I\'m working! ~JQuery');
});
</script>
Level 1
I've not been able to get anything apart from CSS to load with Vite. I end up using the CDNs because vite seems to break javascript files. Very confused as to what the purpose of vite actually is.
Level 17
@JoeT add it as a cdn
Level 15
Shameless promotion but I wrote a blog post about how to use jQuery with Laravel and Vite roughly 3 months ago.
TLDR: Import jquery like any other package and attach it to the window object.
// bootstrap.js OR app.js
import $ from 'jquery';
window.$ = $;
Use the Vite directive to load your app.js file.
@vite('resources/js/app.js')
For inline scripts, use type module on your script tags and call it after the Vite directive.
<script type="module">
$('body').html('<h1>Hello World!</h1>');
</script>
For accessing jQuery in your app.js or bootstrap.js import it like any other package.
3 likes
Level 10
@thinkverse thanks for the detailed reply. But this does not work for me. I tried a number of approaches and finally, I removed jquery from the vite.
in my case yarn dev does not show the errors but yarn build throws the errors.
my project is on github https://github.com/nasirkhan/laravel-starter, can you help me to find the issue here?
Level 50
@nasirkhan I entered it in begining of file resources/js/bootstrap.js and it's worked. And no resolve in vite.config.js
resources/js/bootstrap.js
import $ from 'jquery';
window.$ = window.jQuery = $;
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,
}),
],
});
and other jquery plugins after that in resources/js/bootstrap.js
....
....
import notify from 'notifyjs-node';
window.notify = $.notify = notify;
also jquery-ui in resources/js/app.js looks like that
import './bootstrap';
import 'jquery-ui/dist/jquery-ui'
import 'jquery-ui/dist/themes/base/jquery-ui.css'
Level 1
@thinkverse thank you ❤️
Please or to participate in this conversation.