Scripts are not working in astro application when deployed to netlify

Question

I just started dabbling with Astro using React/html/tailwind and while I've been having a blast, I'm running into an issue when I deploy my astro application to netlify.

When I run things locally using npm run start everything runs great and displays how I want it. On the other hand, when I deploy my web app via netlify, none of the scripts are working.

I tried moving my scripts to a separate folder in the src folder and reference them in the code, but that still does not work. I checked out Astros documentation of course and everything looks fine. Like I said though, I'm new to astro so its possible im doing something wrong.

Here is the code:

<div>
  <button class="relative group" id="drawer-toggle">
    <div
      class="relative flex overflow-hidden items-center justify-center rounded-full w-[50px] h-[50px] transform transition-all bg-slate-700 ring-0 ring-gray-300 hover:ring-8 group-focus:ring-4 ring-opacity-30 duration-200 shadow-md"
    >
      <div
        class="flex flex-col justify-between w-[20px] h-[20px] transform transition-all duration-300 origin-center overflow-hidden"
      >
        <div
          class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-x-10"
        >
        </div>
        <div
          class="bg-white h-[2px] w-7 rounded transform transition-all duration-300 group-focus:translate-x-10 delay-75"
        >
        </div>
        <div
          class="bg-white h-[2px] w-7 transform transition-all duration-300 origin-left group-focus:translate-x-10 delay-150"
        >
        </div>

        <div
          class="absolute items-center justify-between transform transition-all duration-500 top-2.5 -translate-x-10 group-focus:translate-x-0 flex w-0 group-focus:w-12"
        >
          <div
            class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 rotate-0 delay-300 group-focus:rotate-45"
          >
          </div>
          <div
            class="absolute bg-white h-[2px] w-5 transform transition-all duration-500 -rotate-0 delay-300 group-focus:-rotate-45"
          >
          </div>
        </div>
      </div>
    </div>
  </button>
</div>

<!-- <script src="../../scripts/local.ts"></script> -->
<script>
  const drawerToggle = document.getElementById("drawer-toggle");
  const drawer = document.getElementById("drawer");

  drawerToggle?.addEventListener("click", () => {
    console.log("opening drawer");
    drawer?.classList.toggle("translate-x-full");
  });
</script>

Answer 1

I figured it out: There was a failing fontawesome script and apparently that was causing no scripts to work. Once I commented out that script and had no more errors in my console, i deployed it and it worked!