withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
47.18k stars 2.51k forks source link

MDX cannot be used with the Container API #11131

Closed NotNite closed 6 months ago

NotNite commented 6 months ago

Astro Info

Astro                    v4.9.0
Node                     v20.12.2
System                   Linux (x64)
Package Manager          npm
Output                   static
Adapter                  none
Integrations             @astrojs/react
                         @astrojs/mdx

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

No response

Describe the Bug

The Container API expects an AstroRenderer but the MDX package cannot be used as one.

const container = await AstroContainer.create({
  renderers: [
    {
      name: "@astrojs/mdx",
      // There *isn't* a server entrypoint, so this is going to fail
      serverEntrypoint: "@astrojs/mdx"
    }
  ]
});

for (const post of blog) {
  const component = await post.render();
  const html = await container.renderToString(component);
  // ...
}

It leads to this error at build time:

Cannot read properties of undefined (reading 'call')
  Stack trace:
    at renderFrameworkComponent (file:///home/julian/code/js/notastro/dist/chunks/astro/server_BTSVHq9A.mjs:1324:33)
    at async renderComponentToString (file:///home/julian/code/js/notastro/dist/chunks/astro/server_BTSVHq9A.mjs:1648:28)
    at async lastNext (file:///home/julian/code/js/notastro/dist/chunks/rss.xml_DVpI9pOG.mjs:1231:25)
    at async RenderContext.render (file:///home/julian/code/js/notastro/dist/chunks/rss.xml_DVpI9pOG.mjs:1254:22)
    at async Module.GET (file:///home/julian/code/js/notastro/dist/chunks/rss.xml_DVpI9pOG.mjs:2496:18)

where that line is if (await r.ssr.check.call({ result }, Component, props, children)) { in renderFrameworkComponent.

Not providing the renderer leads to:

No valid renderer was found for this file extension.
  Hint:
    Did you mean to enable the `@astrojs/react`, `@astrojs/preact`, `@astrojs/solid-js`, `@astrojs/vue`, `@astrojs/svelte` or `@astrojs/lit` integration?

Does MDX just not support SSR in any form? I was hoping the Container API could let me render my blog posts for RSS...

What's the expected result?

To render the MDX component without issue.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-kpdza3?file=src%2Fpages%2Fblog%2Frss.xml.js

Participation

Princesseuh commented 6 months ago

You want the following entrypoint:

  renderers: [
    { name: "@astrojs/mdx", serverEntrypoint: "astro/jsx/server.js" },
  ],

You can refer to this example, that uses MDX: https://github.com/delucis/astro-blog-full-text-rss/blob/latest/src/pages/rss.xml.ts

In the future we'll be making it easier to configure the renderers, so this won't be needed.