JQuery not applying

Hello! I made a very tiny "counter" project using jQuery. All it does is increment the count when the button is clicked. I am using Vite as my bundler and the project works just fine on my local machine.

⚠️ Please note that I am using Jquery by downloading the compressed code rather than using CDN. I am not allowed to use CDN for this project.

However, when I pushed to Vercel from the github repo, the button stopped working. In fact, the button was also not working when I set up "Github Pages" for it.

Current behavior - button not working. Likely Jquery is not being applied. Expected behavior - The button works and increments the count.

I have tried the following ways -

Using npm install jquery
Adding and removing type=module from script tags.
Adding a import $ from 'jquery'; in counter.js (it broke deployment)

Please help me resolve the issue. Lots of thanks in advance.

Github repo - https://github.com/ShayokhShorfuddin/jquery-counter

GitHub

GitHub - ShayokhShorfuddin/jquery-counter

Contribute to ShayokhShorfuddin/jquery-counter development by creating an account on GitHub.

Vecrel site - https://jquery-counter.vercel.app/ GH Pages - http://shayokh.is-a.dev/jquery-counter/

Can someone provide any insight or a potential fix?

Vercel Staff

Hi , welcome to the Vercel Community!

I'm sorry you are facing this issue. After checking your repo and Vercel Site, I recommend you read through the solution for this recent similar post

https://community.vercel.com/t/unable-to-apply-jquery-also-getting-404-for-other-routes-except-index/4949/8

Vercel Community

Connect, learn, share projects, and get community support

Hello! I added type = "module" to the script tags in my recent commit.

I checked the project on the Github Pages. Unfortunately, the "Increment" button still seems unresponsive.

I went a step further to check the Browser Console. I saw that the scripts were added as expected.

Also, I checked the "Sources" tab. Even though the scripts are added, I couldn't find both of the js files in the file tree.

Vercel Staff

Hi , oh I see.

I was able to run your project successfully by doing the following:

Run npm i jquery
Update your counter.js file to:

import $ from "jquery";

$(() => {
  let count = 0;

  $("#increment").on("click", () => {
    count++;
    $(".count").text(count);
  });
});

Update your index.html file to:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>

  <body>
    <div>
      <p class="count">0</p>
    </div>

    <button id="increment">Increment</button>

    <script type="module" src="/src/counter.js"></script>
  </body>
</html>

Use the default Vite project configuration on Vercel.

Thanks a lot! The project works perfectly!

This topic is closed. It no longer accepts new replies.

⚠️ Please note that I am using Jquery by downloading the compressed code rather than using CDN. I am not allowed to use CDN for this project.

However, when I pushed to Vercel from the github repo, the button stopped working. In fact, the button was also not working when I set up "Github Pages" for it.

Current behavior - button not working. Likely Jquery is not being applied. Expected behavior - The button works and increments the count.

I have tried the following ways -

Using npm install jquery
Adding and removing type=module from script tags.
Adding a import $ from 'jquery'; in counter.js (it broke deployment)

Please help me resolve the issue. Lots of thanks in advance.

Github repo - https://github.com/ShayokhShorfuddin/jquery-counter

GitHub

GitHub - ShayokhShorfuddin/jquery-counter

Contribute to ShayokhShorfuddin/jquery-counter development by creating an account on GitHub.

Vecrel site - https://jquery-counter.vercel.app/ GH Pages - http://shayokh.is-a.dev/jquery-counter/

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Vite App</title> </head> <body> <div> <p class="count">0</p> </div> <button id="increment">Increment</button> <script type="module" src="/src/counter.js"></script> </body> </html>