JQuery not applying

Help
1

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.

:warning: 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 -

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

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

Github repo - GitHub - ShayokhShorfuddin/jquery-counter
Vecrel site - https://jquery-counter.vercel.app/
GH Pages - Vite App

2

Can someone provide any insight or a potential fix?

3

Hi @shayokhshorfuddin, 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

4

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.

image
image1919×453 31.7 KB

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.

image
image1008×609 33.7 KB

5

Hi @shayokhshorfuddin, oh I see.

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

  1. Run npm i jquery
  2. Update your counter.js file to:
import $ from "jquery";

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

  $("#increment").on("click", () => {
    count++;
    $(".count").text(count);
  });
});
  1. 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>
  1. Use the default Vite project configuration on Vercel.
1 Like
6

Thanks a lot! The project works perfectly!

1 Like
7

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