Closed agrahamg closed 1 year ago
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.
+1 here
astro
are you using?Astro @ 2.0.4 @astrojs/mdx @ 0.15.2
no
npm
Mac
Stylelsheet and script tags are injected into the body of pages using MDX components.
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
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.
Sorry about this, will prioritize a fix for this.
@matthewp Noting this to update unit tests! https://github.com/withastro/astro/pull/6034#issuecomment-1413714985
Fixed by https://github.com/withastro/astro/pull/6107, test updated.
A similar issue persists for me:
astro
are you using?Astro @ 2.0.6 @astrojs/mdx @ 0.16.0
no
yarn
Mac
Stylesheets and scripts are injected into the body
when rendering an MDX Content
component that uses an Astro component in the MDX file.
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.
@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.
Thanks! I'll reopen, and thanks for the new reproduction.
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.
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
Thanks @minht11, i'll see if i can figure out how yours is different.
@minht11 there's a new preview release that i believe fixes your issue. Let me know, thanks.
I can confirm that this fixes my issue. Thanks! 🙏
All set for me as well!
Tested locally and new prerelease fixes my issues too.
Thanks everyone, hoping the patch goes out tomorrow.
This is still happening for me on 2.0.8. Using vercel adapter
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.
@tonydangblog there was another bug fixed in https://github.com/withastro/astro/pull/6216. That should go out in a couple of hours. If that doesn't fix your problem please file a new issue.
The 2.0.11 release resolved the issue for me. Thanks for persistently tackling this one!
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