compiledContent() no longer working with getCollection()

[taoeffect]

Astro Info

Astro                    v4.5.10
Node                     v18.17.1
System                   macOS (arm64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/sitemap
                         @astrojs/mdx

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

No response

Describe the Bug

Hi, I've been trying to upgrade our blog to use the latest version of Astro, but I've hit a serious snag.

The documentation recommends moving away from Astro.glob to using getCollection(), and I've been diligently attempting to do this (especially since we have a blog post in the works on how to migrate from Wordpress to Astro).

However, our blog depends on calls to page.compiledContent() to render article summaries as well as the RSS feed.

The entries that are returned by getCollection() do not seem to have a compiledContent() function on them.

What to do? I've searched the issues and Discord and couldn't find anything on this. The closet thing seems to be this Container API proposal, but maybe I'm mistaken and that's unrelated to this issue.

See above. The "bug" is that there is no clear way to upgrade a blog that was previously working fine with Astro, and the documentation doesn't seem to help.

You can attempt to build the "minimal reproducible example" link with npm run build to see page.compiledContent is not a function error.

What's the expected result?

For the documentation to clearly explain an alternative to using the compiledContent() function.

Link to Minimal Reproducible Example

https://github.com/okTurtles/blog.okturtles.org/tree/update-deps

Participation

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

[Thodor12]

Content collection entries (of type "content") expose a render() method which returns a component factory you can write in your component like so:

const entry = /* content collection entry */;
const { Content } = await entry.render();
---

<Content />

[taoeffect]

Yes, I saw that in the docs, but AFAIK that doesn't give us the ability to get the rendered string value, which is what we need (same functionality of compiledContent())

[taoeffect]

The closest I've been able to get with the new approach is entry.body, which returns the contents of the entry to be rendered. However, the problem is most of the posts are markdown (or MDX), and we need the rendered markdown (i.e. the HTML). This we could get before with the Astro.glob approach, but not anymore it seems with getCollection().

This is too bad, it means we can't use the new getCollection() feature, and will have to recommend that people use Astro.glob instead in our upcoming blog post on how to switch from Wordpress to Astro.

If this changes, please let us know!

[taoeffect]

*Looks like I found a workaround. I got the idea from this last section of the Markdown documentation to use the 'marked' library to manually render entry.body to HTML.

This approach technically works, but it comes with the downside that's mentioned in the documentation:

This will not inherit from any of Astro’s built-in Markdown and MDX settings that you have configured. Be sure that you understand these limitations before implementing this in your project.

It also means (AFAIK), that MDX posts won't be rendered correctly.

So still, ideally the compiledContent() function would be restored 🙏

[bluwy]

Thanks for tracking this down and finding a workaround. At the moment, I think withastro/roadmap#419 is the best place to track this issue/feature. IIRC we had refactored how MDX was rendered, which while makes it more robust, introduces some caveats like this that can't be easily supported. Regarding the container API (that should help with this feature), we have that on the roadmap this quarter, so it's likely something to be explored soon. I'll close this issue for now.