Hoisted scripts missing in both dev/prod for content collection entry with MDX

[noidwasavailable]

I added mdx integration to astro for richer blog content, and created an astro component to use in the mdx documents. I think I followed all directions to do so clearly, but client side script tags don't seem to be working in mdx documents.

I have the component @components/ImagePreview.astro, and if I use it in, say pages/index.astro, it works fine. But if I import it to content/blog/my-blog-post.mdx and use it there, the HTML is rendered but the script does not work. I bumped up to "astro": "^2.10.4", and "@astrojs/mdx": "^0.19.7", because I saw the Astro issue regarding this was closed.

I left a comment in that issue thread, saying that this still seems to be an issue for me, but I wasn't sure maybe AstroPaper had some conflicting configurations that I wasn't able to figure out. Link to my comment on the issue

I can get it to work with the is:inline directive, but according to the docs, it seems like it should properly work...

I've enabled the experimental assets, if that makes any difference, which I doubt because even if I change it to img instead of Image from astro:assets, the behaviour is identical.

ImagePreview.astro component for reference:

---
import { Image } from "astro:assets";

export interface Props {
  src: string;
  alt: string;
  width: number;
  height: number;
}

const props = Astro.props;
---

<!-- Displayed within the page -->
<figure class="figure-display cursor-pointer">
  <Image {...props} />
  {props.alt ? <figcaption class="my-2">{props.alt}</figcaption> : ""}
</figure>
<!-- Displayed fullscreen when clicked -->
<div
  class="figure-preview animate-fade-in fixed left-0 top-0 z-50 m-0 hidden h-full w-full flex-col items-center justify-center bg-skin-fill bg-opacity-80 transition-all"
>
  <figure
    class="flex max-h-[80%] max-w-[70%] flex-col items-center justify-center"
  >
    <Image
      {...props}
      class="animate-fade-in h-[100%] w-[100%] object-contain"
    />
    {
      props.alt ? (
        <figcaption class="animate-fade-in my-2">{props.alt}</figcaption>
      ) : (
        ""
      )
    }
  </figure>
</div>

<style>
  @keyframes fade-in {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  .animate-fade-in {
    animation: fade-in 0.3s ease-in-out;
  }
</style>

<script>
  const displayImage = document.querySelector(".figure-display");
  const previewImage = document.querySelector(".figure-preview");

  displayImage?.addEventListener("click", () => {
    previewImage?.classList.remove("hidden");
    previewImage?.classList.add("flex");
  });
  previewImage?.addEventListener("click", () => {
    previewImage.classList.add("hidden");
  });
</script>

[noidwasavailable]

Submitted a new issue on astro as per the advice of the author of the original issue

[satnaing]

Hello @noidwasavailable
Sorry for my late response.

I assume it is the problem with Astro itself and I guess they are still working on this.
Is this still occurring in Astro v3.1?

[noidwasavailable]

@satnaing Yes, I think it's an Astro problem. I upgraded to Astro v3 manually, but on 3.0.13, the issue persists. I'll try it again on the latest versions and let you know how it goes.

[noidwasavailable]

@satnaing Hi, I finally had the time to get around testing stuff. On upgrading AstroPaper, and manually updating the dependencies for astro to ^3.2.2 (latest), I can confirm, this issue no longer persists, even though there is no mention of hoisted scripts being fixed anywhere on astro 3.0 release.

[satnaing]

Okay, thanks for confirming this.
I'll close this issue for now. Feel free to reopen or create new issues if you encounter any further problems.