Using React component inside MDX file fails with Container API

pReya commented 1 month ago

Astro Info

Astro                    v4.11.3
Node                     v18.20.3
System                   Linux (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/sitemap
                         @astrojs/react

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

No response

Describe the Bug

I've tried to create a "full text" RSS feed with the Container API, according to @delucis example in this repository: https://github.com/delucis/astro-blog-full-text-rss

The only thing I've changed about his example:

Add React to the project (e.g. install the React packages and add the React renderer to src/pages/rss.xml.ts)
Add a React component into the src/content/blog/first-post.mdx file

Now, when you open the RSS feed (under the /rss.xml URL), you will get the following Astro error:

Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. Received protocol 'astro:'

What's the expected result?

The RSS feed should render as expected, without any errors.

Link to Minimal Reproducible Example

https://stackblitz.com/~/github.com/pReya/astro-blog-full-text-rss?file=src/pages/rss.xml.ts&initialPath=/rss.xml

Participation

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

ematipico commented 1 month ago

I'm not really sure why you get the error, but if you add the renderer manually, it works:

import  reactContainerRenderer from "@astrojs/react/server.js";

const container = await AstroContainer.create({ renderers });
container.addServerRenderer({renderer: reactContainerRenderer });

https://docs.astro.build/en/reference/container-reference/#adding-a-renderer-through-the-container-api

pReya commented 1 month ago

I'm not really sure why you get the error, but if you add the renderer manually, it works:
import  reactContainerRenderer from "@astrojs/react/server.js";

const container = await AstroContainer.create({ renderers });
container.addServerRenderer({renderer: reactContainerRenderer });
https://docs.astro.build/en/reference/container-reference/#adding-a-renderer-through-the-container-api

Thanks, @ematipico! It does work, indeed. However I'm still getting a TypeScript error for the addServerRenderer() call. Any idea how to type this properly? Can I just pass a random name, to satisfy TS?

Argument of type '{ renderer: NamedSSRLoadedRendererValue; }' is not assignable to parameter of type 'AddServerRenderer'.
  Property 'name' is missing in type '{ renderer: NamedSSRLoadedRendererValue; }' but required in type '{ renderer: SSRLoadedRendererValue; name: string; }'.ts(2345)
index.d.ts(67, 5): 'name' is declared here.
(property) renderer: NamedSSRLoadedRendererValue

withastro / astro