Astro components from Remark plugin are not rendered in .mdx pages

[fmonper1]

What version of astro are you using?

1.2.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

I am trying to use the AstroAsides integration from the docs in my own site.

The integration works flawlessly in normal .md pages, but for .mdx pages, the directives get replaced by the correct code but the Aside component isnt being rendered.

This is the code for the integration
https://github.com/withastro/docs/blob/main/integrations/astro-asides.ts

And the .mdx page returns the following html for the aside

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-qhpm6w

Participation

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

[fugaku]

I also got this issue when not using astroFlavoredMarkdown setup in config

repro link : https://stackblitz.com/edit/github-qhpm6w-eshlon

[bholmesdev]

@fmonper1 @fugaku Thanks for reporting! Looks like this is a injectScript('page-ssr') issue. Currently, this hook only works for .astro files since it relies on Astro frontmatter. astroFlavoredMarkdown was compatible with this hook by compiling to .astro files, but Markdown and MDX files unfortunately don't do so today.

Sounds like we need to rethink our injectScript API to support Markdown and MDX. @fmonper1 today, I'd suggest importing the Asides component directly instead of using a :::note marker. The following should work with MDX:

import Aside from './path/to/aside';

<Aside type="note">

This is a **cool** note!

</Aside>

[bholmesdev]

@fmonper1 @fugaku Since this behavior is expected (i.e. remark plugins built for our "legacy" Markdown parser, especially this considerably hack-y plugin from our docs team, is not expected to work with MDX), I'll be closing this issue. I'd recommend importing the component and applying manually over using custom directives like :::note for now.

I'd also suggest trying astro-m2dx for a suite of MDX utilities, without the need for custom remark plugins!