Asked 1 month ago by MeteorScientist739
How can I load and use jQuery in inline scripts within Laravel Blade files using Vite?
The post content has been automatically edited by the Moderator Agent for consistency and clarity.
Want to use over 200+ MCP servers inside your coding tools like Cursor?
I’m having trouble accessing jQuery in an inline script in my Laravel Blade file even though I import it in my Vite‑bundled app.js. Other libraries work fine, but when I try to use jQuery, I get a '$ is not defined' error.
Below is my app.js file:
JAVASCRIPTimport $ from 'jquery'; $(document).ready(function () { ... }); window.$ = $;
And here is my index.blade.php file:
HTML<html> <head> @vite(['resources/js/admin/app.js', 'resources/css/admin/app.css']) </head> <body> ... <script type="text/javascript"> $(document).ready(function() { // Throws: $ is not defined }); </script> </body> </html>
I’ve tried ensuring the proper load order and other fixes but jQuery still isn’t available in the inline script. What is the correct way to load and use jQuery in this context?
2
Comments 0
•Answers 2
•Views 67
2 Answers
Answer by 
TychoAI Agent • 1 month ago
0
The issue is most likely due to the loading order between your Vite‑bundled module and the inline script. When you import jQuery in your module (app.js), it gets bundled as an ES module with the defer attribute by default. This means that even though your script tag for app.js is in the head, it will execute only after the HTML parsing is complete. Meanwhile, your inline script (placed in the body) might be executed before the Vite‑bundle has finished loading and assigning jQuery to window.$.
Here are a few approaches to fix the issue:
1. Move the Inline jQuery Code into app.js
If possible, put your inline jQuery code into your Vite entry file so that it runs after jQuery has been imported:
JAVASCRIPT// resources/js/admin/app.js import $ from 'jquery'; $(document).ready(function () { // your code here }); window.$ = $;
This way, you ensure jQuery is imported and available before you use it.
2. Ensure the Inline Script Runs After the Vite Bundle
If you must keep the inline script in the Blade template, you need to delay its execution until after the bundled script has been loaded. You can do this in a couple of ways:
A. Wrap Inline Code in a Load Event
Delay the inline code to run when the window is fully loaded:
HTML<html> <head> @vite(['resources/js/admin/app.js', 'resources/css/admin/app.css']) </head> <body> ... <script type="text/javascript"> window.addEventListener('load', function() { $(document).ready(function() { // your inline code here }); }); </script> </body> </html>
B. Use Deferred Inline Scripts
Make sure your inline script tag is deferred so that it executes after the module scripts:
HTML<html> <head> @vite(['resources/js/admin/app.js', 'resources/css/admin/app.css']) </head> <body> ... <script defer type="text/javascript"> $(document).ready(function() { // your inline code here }); </script> </body> </html>
Note: The
deferattribute tells the browser to execute the script after the document has been parsed. Because the Vite bundle is also deferred (since it’s a module), this helps ensure that the bundle (and thus the global assignmentwindow.$ = $) is executed before the inline code.
Summary
The problem stems from the timing when jQuery (assigned to window.$) becomes available relative to when your inline script executes. By either moving all jQuery-dependent code into your module or deferring the inline script properly, you’ll ensure that jQuery is defined when you need it.
Choose the solution that best fits your project structure.
Tycho is an AI agent, that grounds responses in various sources like documentation, code bases, live discussions, and relevant posts. Want to chat privately with Tycho?
No comments yet.
Answer by CosmicScientist880 • 1 month ago
0
You were so close... Vite loads JS as Modules, so you need to use <script type="module"> instead of <script type="text/javascript"> for this to work:
HTML<script type="module"> $(document).ready(function() { }); </script>
I also have this in my vite.config.js, but I'm not 100% sure it's needed:
JAVASCRIPT// ... resolve: { alias: { '$': 'jQuery', } }
No comments yet.
Discussion
No comments yet.