Unhelpful error message when unexpected MDX content found

[vanessacor]

What version of astro are you using?

2.0.10

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

Linux Ubuntu 20.04

Describe the Bug

I was trying to follow the tutorial but using some files from my old blog that contained a little {description} placeholder and Astro crashed with an unhelpful error message.

Because I didn't realise it was related to that seemingly harmless snippet, I went down the rabbit 🐰 🕳️ hole for a couple of hours 😂

Steps to reproduce

npm create astro@latest

   dir   ./tasty-trappist
  tmpl ✔ Template copied
  deps ✔ Dependencies installed
   git ✔ Git initialized
    ts   Yes
   use ✔ TypeScript customized

• Open src/content/post1.md
• Rename it to .mdx
• Type {description} before the first paragraph

What happens

Fails to render and shows unhelpful error message

NoMatchingRenderer: Unable to render `Content`.

No valid renderer was found for this file extension.

What should happen

Helpful error message.

Can not render {description} on line X

Link to Minimal Reproducible Example

https://github.com/vanessacor/astro-mdx-error

Participation

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

[MelihDarcanxyz]

Similar problem here, can't render an MD/MDX file, getting the same error.
Was following this documentation.
Edit: Also this documentation.

[oacs]

If it fails to compile that mdx component it throws the error of Unable to render Content, so @MelihDarcanxyz it could be that you have the wrong formatting or a not valid character on your mdx file that makes it fail.

[MelihDarcanxyz]

I tried to remove everyting that can cause a problem, after reading your comment. It turns out, this frontmatter line was causing the problem:
layout : '@layouts/ListLayout.astro'

And I was greeted with this. It comes for you!

[oacs]

const post = Astro.props;
const { Content: AnotherName } = await post.render(); // renamed here
---
<BlogPost {...post.data}>
    <h1>{post.data.title}</h1>
    <AnotherName />
</BlogPost>

In this case if you change the name of the Content property from a collection, the displayed error shows unable to render "Content", I think this could be misleading, @Princesseuh does it make sense to change the error message to something like unable to render mdx file if we know that we tried to hydrate an mdx file?