I recently deployed a static using HTML, CSS, JS/JQuery, and Scss. I am using Vite as my bundler. The project is called “restaurant”. Please note that the project works perfectly in my local environment.
However, right after deployment, I noticed that the functionalities that are implemented in Jquery don’t work at all. Also, none of the other pages except the index page show up.
Sorry that you’re facing this issue. Can you share what is the project structure or build process? Is it a single page app?
Please share your public repo or a minimal reproducible example. That will let us all work together from the same code to figure out what’s going wrong.
This codebase works perfectly when run locally using Vite. But it’s not behaving properly on Vercel. Please keep in mind I tried to deploy this project 2 times. At first, I chose “Vite”; at the 2nd attempt, I chose “Other” as my preset. The issue persists in both cases.
I’ve cloned and deployed your project (live here) successfully after doing the following changes:
You must pay attention to the build warnings, here it says that to include the jquery scripts you must declare them as type="module" in the script tags.
Thank you so much for the effort! I checked the site and the routes seems to be working!
But one thing I noticed is that the functionalities that use JQuery are still unresponsive—for instance, the “Load More” button at the end of the index page. In my local environment, this button loads 4 more cards every time it’s pressed.
Vite seems to put the script tags placed at the bottom of body directly in the head tag. This could be a reason but can’t say with full confidence.
Any suggestion or insight on that would be very helpful!