What version of astro are you using?

2.1.7

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

What browser are you using?

Chrome

Describe the Bug

The new Content Collection API lets you import mdx files and render their content anywhere using the .render() method, and only imports those components and their styles and scripts when they're used on a page. This works perfectly when generating routes from content - on each page an entry, its scripts and styles are executed and bundled. But when I try to render multiple entries on one page through a loop, scripts and styles don't work.

// pages/page.astro
---
const entries = await getCollection('someColletion');
---
{entries.map(async entry => {
	// Scripts and styles don't work in <Content />
	const { Content } = await entry.render();
	return <Content mdProps="work" />; 
})}
// content/someCollection/some-mdx.mdx
import AstroComponent from 'pathToComponent/AstroComponent.astro';
<AstroComponent />
// components/AstroComponent.astro
<!-- Some html -->
<script>/* Some scripts */</script>
<style>/* Some styles */</style>

Everything works when explicitly tell astro which components to render (see reproduction):

---
const { Content } = await entries[0].render();
const { Content: Content2 } = await entries[1].render();
---
<Content />
<Content2 />

I want to render my mdx components with imported nested astro components through an array, as this is the only way to use astro components and prevent bundling of unused scripts and styles (#6328)

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-b1xdf7-ptottr?file=src%2Fcomponents%2FRenderEntry.astro,src%2Fpages%2Findex.astro,src%2Fpages%2Ffinal.astro

Participation

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