MDX rendered by a layout does not emit CSS

[kurtextrem]

What version of astro are you using?

2.6.5

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

None

What package manager are you using?

yarn (and pnpm)

What operating system are you using?

Windows

What browser are you using?

Chrome

Describe the Bug

When you use a layout to render a MDX page:

(Layout.astro)

---
const { post } = Astro.props;
const { Content } = await post.render();
---

<Content />

and the MDX page contains something that uses CSS modules, such as:

import Tweet from "../../components/Tweet.astro";
<Tweet id="1382838799420514317" />

where <Tweet> is an Astro component:

---
import { EmbeddedTweet } from "react-tweet";
import { getTweet } from "react-tweet/api";

interface Props {
    id: string;
}

const { id } = Astro.props;
const tweet = await getTweet(id);
---

<EmbeddedTweet tweet={tweet} />

It does not emit the CSS modules correctly, not in dev and not on build. See the attached codesandbox, where index.astro is broken - no CSS emitted, and then working.astro (/working), the CSS is emitted correctly, because I added the Tweet component to the WorkingLayout component. So only when you add the Tweet component to something non-MDX-related, it emits the CSS modules correctly.

Link to Minimal Reproducible Example

https://codesandbox.io/p/sandbox/lingering-microservice-cz8tnn?file=%2Fsrc%2Fpages%2Findex.mdx%3A1%2C1

Participation

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

[RobertDS07]

Hello @kurtextrem, how are you?

I've seen your codesandbox and analyzed the code. I found a possible solution by adding the directive client:load to the EmbeddedTweet component. The result is as expected.

Here is the link to my sandbox with the possible solution.

I'm not sure if it's expected to have to add this directive to a React library, but...

[kurtextrem]

@RobertDS07 Thanks! I think this solution however makes Astros biggest benefit (not shipping JS) redundant...

[kurtextrem]

Does anyone have a hint at where to start looking if I want to fix this bug?

(the work-around only partially fixes the issue: as you can see the unstyled tweet "flashes" while the assets are loading when adding client:load)

[lilnasy]

This is an architectural limitation, I tried to provide an explanation as to why in a duplicate issue: #7761 (comment).

[natemoo-re]

This seems to be a duplicate of #7761 so I'm going to track that there. Feel free to chime in on that conversation!