MDX Content component imported via Astro.glob initially renders child components unstyled

[alexjcook]

Astro Info

Astro                    v4.15.6
Node                     v21.6.1
System                   Windows (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

When using Astro.glob() to import mdx file(s), the <Content> component fails to render styles of any children components on initial page load of dev server. If the page is refreshed or a browser tab was already open to the dev server url, the child components are rendered with styles correctly.

Build command renders components correctly.

What's the expected result?

Content component should display correctly on initial page load of dev server

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-1acyzy?file=src%2Fpages%2Findex.astro

Participation

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

[matthewp]

Astro.glob has been deprecated and will be removed in a future version of Astro. I suggest starting to use Content Collections instead: https://docs.astro.build/en/tutorials/add-content-collections/

[alexjcook]

Thanks, I wasn't aware of Astro.glob being deprecated.

Will the Content component from import.meta.glob similarly be deprecated? I was able to reproduce the same inconsistent behaviour:
https://stackblitz.com/edit/github-1acyzy-43rpru?file=src%2Fpages%2Findex.astro

And thanks for the tip about Content Collections, I'll take a look.

[bluwy]

The issue seems to be that with Astro.glob or import.meta.glob, you're dynamically importing the MDX files, so we're unable to analyze the CSS used ahead of time because Vite will only keep track of those imported MDX files when the <Content /> are being called.

When the <Content /> is called, it'll already be too late (during streaming) since we've already rendered the head and stuff when we reach at the point of the <Content /> renders. The styles need to be hoisted to the head. The next refresh works because the previous run already keeps track of the imported MDX file so it could use it to hoist the styles to the head directly before needing to render the <Content />.

So I think this is more of a limitation of the current rendering. You can workaround this with import.meta.glob(..., { eager: true }) instead so that it's imported directly (instead of dynamic import) and we can analyze because we know it'll be used. Using content collections or content layer should also avoid this issue since we'd have more control of the page rendering I believe.

[ascorbic]

@bluwy Is this something we're ever likely to be able to fix, or can this be closed?

[bluwy]

Yeah I think we can close this. I don't think there's an easy fix in the long run anyways, and using content collections or content layer would be better (for other reasons too) for now.