stop component script from loading when component not on page | Astro Lounge | Page 1

I have a Handler file that basically traffics incoming block content from Sanity, one of the components has JS in a <script> tag in the HTML.

Astro bundles this at build and includes the JS on every page, even when the component isn't used. this is throwing errors because the script can't find an instance of an element in order to complete its task.

how do i prevent this?

if it helps, here's my Handler code

import { PortableText } from "astro-portabletext"
import AstroImage from "./AstroImage.astro"
import AstroQuotation from "./AstroQuotation.astro"
import AstroBreak from "./AstroBreak.astro"
import AstroEmbed from "./AstroEmbed.astro"
import AstroGallery from "./AstroGallery.astro"
import AstroIGEmbedBlock from "./AstroIGEmbedBlock.astro"
import AstroMapBlock from "./AstroMapBlock.astro"
import AstroVideoBlock from "./AstroVideoBlock.astro"
import InternalLink from "./InternalLink.astro"
import AstroChart from "./AstroChart.astro"
import AstroMapbox from "./AstroMapBox.astro"
import AstroContentGrid from "./AstroContentGrid.astro"

---
<PortableText 
  {...Astro.props}
  components={{
    type: {
      imageFull: AstroImage,
      image: AstroImage,
      video: AstroVideoBlock,
      gallery: AstroGallery,
      googleMyMap: AstroMapBlock,
      instagramPost: AstroIGEmbedBlock,
      mapbox: AstroMapbox,
      quotation: AstroQuotation,
      break: AstroBreak,
      embed: AstroEmbed,
      chart: AstroChart,
      contentGrid: AstroContentGrid,
    },
    mark: {
      internalLink: InternalLink
    },
  }}
/>```

#stop component script from loading when component not on page