MDX files with components insert script in layout slot

[agrahamg]

What version of astro are you using?

2.0.4

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

Scripts from Astro Components are placed in the layout slot instead of in head when using MDX

This is a new issue since 2.0.2

Link to Minimal Reproducible Example

https://github.com/agrahamg/astro-example

Participation

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

[tombennet]

Looks like this was introduced by #6034 in 2.0.3.

For me it doesn't just affect scripts from components, but also the site's global CSS generated using the astrojs/tailwind plugin.

In 1.9.2, stylesheets were injected in both head and body (see #5715). Duplication issue is now fixed, but stylesheets appear at the top of the componont in the body, meaning a flash of unstyled content before the browser finds and downloads the resources.

[z336]

+1 here

What version of astro are you using?

Astro @ 2.0.4
@astrojs/mdx @ 0.15.2

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

no

What package manager are you using?

npm

What operating system are you using?

Mac

Describe the bug

Stylelsheet and script tags are injected into the body of pages using MDX components.

Link to Minimal Reproducible Example

This page has MDX components and is showing the behavior: https://astro-docs-prototype.netlify.app/docs/en/tutorial/a-tutorial/

This page does not have MDX components and is injecting the tags into the head correctly: https://astro-docs-prototype.netlify.app/docs/en/tutorial/a-second-tutorial/

This is my repo: https://github.com/z336/astro-docs-prototype

[minht11]

I am experiencing same issue of styles and scripts being inserted into body and not head, but while using astro-remote

<Markdown
      components={{
	p: Paragraph,
      }}>
**Removing p component fixes the problem**
</Markdown>

// Paragraphp.astro
<p>
  <slot />
</p>

Reproduction run npm run build and then npm run preview

Not quite sure if this is the same issue, because astro-remote independently parses markdown, but the end result is the same and both are related to markdown, let me know if i need to report separate bug for this.

[matthewp]

Sorry about this, will prioritize a fix for this.

[bholmesdev]

@matthewp Noting this to update unit tests!
#6034 (comment)

[matthewp]

Fixed by #6107, test updated.

[robknight]

A similar issue persists for me:

What version of astro are you using?

Astro @ 2.0.6 @astrojs/mdx @ 0.16.0

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

no

What package manager are you using?

yarn

What operating system are you using?

Mac

Describe the bug

Stylesheets and scripts are injected into the body when rendering an MDX Content component that uses an Astro component in the MDX file.

Link to Minimal Reproducible Example

https://github.com/robknight/astro-css-slot

Navigate to /test, and you will see MDX content with a SmallCaps component. Styles render inside the body tag.

[tombennet]

@matthewp Thanks for the attention on this, but issue persists for me too, similar use-case to @robknight's above (rendering an MDX Content component that includes an Astro component). Happy to open new issue if required.

[matthewp]

Thanks! I'll reopen, and thanks for the new reproduction.

[matthewp]

Just wanted to give an update here, this is my top priority to fix. Some previous fixes just moved the problem to another spot so I want to make sure I get it right this time. You can expect a fix early part of this week.

[matthewp]

I have a preview release out with a fix, in #6152. Would a couple of people mind trying this out and seeing if it resolves their problem? I confirmed it fixes @robknight's example. You can install with:

npm install astro@next--mdx-links

[minht11]

It did not resolve my issue

https://stackblitz.com/edit/github-pcqbox?file=package.json

[matthewp]

Thanks @minht11, i'll see if i can figure out how yours is different.

[matthewp]

@minht11 there's a new preview release that i believe fixes your issue. Let me know, thanks.

[robknight]

I can confirm that this fixes my issue. Thanks! 🙏

[agrahamg]

All set for me as well!

[minht11]

Tested locally and new prerelease fixes my issues too.

[matthewp]

Thanks everyone, hoping the patch goes out tomorrow.

[angelokeirsebilck]

This is still happening for me on 2.0.8. Using vercel adapter

[thisistonydang]

I also have the same problem still on 2.0.10 (no ssr adapter w/ pnpm on mac). Similar to @tombennet, this doesn't just affect scripts from components, but also the site's global CSS generated using the astrojs/tailwind plugin.

[matthewp]

@tonydangblog there was another bug fixed in #6216. That should go out in a couple of hours. If that doesn't fix your problem please file a new issue.

[thisistonydang]

The 2.0.11 release resolved the issue for me. Thanks for persistently tackling this one!