Hoisted scripts missing in dev for content collection entry with MDX

[bholmesdev]

What version of astro are you using?

2.0.1

Are you using an SSR adapter? If so, which one?

None

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the Bug

When using Astro components in MDX with Content Collections, hoisted scripts are ignored. Inline scripts are still present.

To reproduce:

• Create a content collection with an MDX file. Ex: src/content/blog/using-mdx.mdx.
• Load an Astro component with a hoisted script from this MDX file.
• Retrieved the Content component for that entry using getCollection or getEntryBySlug
• Render the component. Notice hoisted scripts are missing.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-wvzeaj?file=src/components/WithHoistedScript.astro

Participation

• I am willing to submit a pull request for this issue.

[fflaten]

Only occurs in dev. Build + preview is fine

[bholmesdev]

@fflaten Yep, replicated and found a fix for dev. Also discovered it's overly eager in prod, and will inject scripts even without rendering with the Content component. This is inconsistent our our CSS bleed prevention, so will fix that in the same PR 👍

[bholmesdev]

Update: separating the prod build concern to a separate issue. There's a lot more to fixing that issue, and it's fairly separate from our dev server problem

[Steffan153]

I'm having the exact same problem, even though it's supposedly fixed. For me it's the same problem in production. With is:inline it works fine. v2.2.0

[bholmesdev]

Hey @Steffan153! Just bumped the dependencies on my minimal example, and wasn't able to replicate the issue on v2.4. If you're still hitting this, lmk your system information and a different minimal repro if you have one.

[Steffan153]

Yes, I tried to figure out the culprit but couldn't. I created a brand new project with astro.new and there was no problem. I tried all kinds of stuff with my local project but couldn't figure it out.

[noidwasavailable]

Hi, @bholmesdev! Same with @Steffan153, I think my current issue is same as this issue.

I tried the above stackblitz and changed package.json to look the same as mine, with "astro": "^2.10.4", and "@astrojs/mdx": "^0.19.7", (only updated these two, because I assume other dependencies don't really matter here). I was not able to reproduce the issue on it, but I think the issue is similar.

I have a content/blog collection that I get by defineCollection, which gets rendered as Content by post.render() where post: CollectionEntry<"blog">, then use <Content /> in the astro component template.

I can confirm non inline script tags within the astro component works when imported to other astro components, but they do not work when it's imported to an mdx file.

Another behaviour I'm noticing is that if I have the script tag to be not inline and start the dev server, it will not work, but if I change it to be inline by is:inline directive, save it to reload, then remove the is:inline directive, it works...

first part (non inline script not working)

second part (declared inline, then removed, then working again)

Doesn't work when built and previewed either. 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.

[bholmesdev]

Hey @noidwasavailable! Gotcha. This sounds like a more nuanced issue than the one at the top of this issue. Since you already have a minimal repro, do you mind opening a separate issue on Astro core?

[noidwasavailable]

@bholmesdev I wasn't able to create a stackblitz reproduction, but I made a repo following the minimal steps required to reproduce the issue and created a new issue here!