Unable to apply Jquery. Also getting 404 for other routes except index

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.

For instance - I was given this link for my project -
https://restaurant-fawn-iota.vercel.app/

Visiting this shows the index.html page. HTML and CSS seems fine but the Jquery buttons don’t work.
When I try to visit other pages like -

https://restaurant-fawn-iota.vercel.app/page-2.html or https://restaurant-fawn-iota.vercel.app/page-2

I am getting 404 error.

Please help

Current behavior - Jquery functionalities not applying. Vercel can’t find other pages except the index page.

Expected behavior - Jquery functionalities work. Vercel finds all pages.

There’s another community post with 404 debugging tips that might be helpful. Please give these solutions a try and let us know how it goes.

A human should be around soon to offer more advice. But you can also get helpful information quickly by asking v0.

Hi @shayokhshorfuddin, welcome to the Vercel Community!

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.

Hello! My project is not an SPA. It has multiple pages. The project basically a handful of HTML pages, CSS and some JS & Jquery in a few sections.

This is my codebase - GitHub - ShayokhShorfuddin/restaurant: An implementation of the UI of a restaurant using HTML, CSS, Sass and Bootstrap. 🥪

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.

It would be helpful if you could share any error codes with us :smile:

1 Like

Hi @shayokhshorfuddin, thanks for sharing the project with us.

It looks like you’ve all the static assets available in the project without any build steps. Can you try updating the output directory to .?

Just tried that.

Here is the deployment link - https://restaurant-gilt-one.vercel.app/

Css went missing from the index page. And as mentioned before, other valid routes cannot be found by Vercel.


Here is my deployment log -


Hi @shayokhshorfuddin, thanks for trying the solution.

I’ve cloned and deployed your project (live here) successfully after doing the following changes:

  1. 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.

    So, I did it like this (you must do it for all warnings):
  2. To use Vite for multi-page apps, according to the Vite docs you must update the vite.config.js file, as follow:
import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        "page-2": resolve(__dirname, "page-2.html"),
        "page-3": resolve(__dirname, "page-3.html"),
        "page-4": resolve(__dirname, "page-4.html"),
        "page-5": resolve(__dirname, "page-5.html"),
        "page-6": resolve(__dirname, "page-6.html"),
        "page-9": resolve(__dirname, "page-9.html"),
        "page-10": resolve(__dirname, "page-10.html"),
        "profile-page": resolve(__dirname, "profile-page.html"),
        "order-details": resolve(__dirname, "order-details.html"),
      },
    },
  },
});
  1. Use the default Vite preset in the Vercel project settings.

After doing these changes your project works fine on Vercel. Try it here: https://restaurant-phi-beige.vercel.app/

Thank you so much for the effort! I checked the site and the routes seems to be working! :tada:

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!


This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.