Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

MDX in content collections break on 4.0.4 but works in 4.0.3 #12958

Closed
1 task
johnjofin07 opened this issue Jan 10, 2025 · 0 comments · Fixed by #12959
Closed
1 task

MDX in content collections break on 4.0.4 but works in 4.0.3 #12958

johnjofin07 opened this issue Jan 10, 2025 · 0 comments · Fixed by #12959
Labels
needs triage Issue needs to be triaged

Comments

@johnjofin07
Copy link

Astro Info

Astro                    v5.1.4
Node                     v22.7.0
System                   macOS (arm64)
Package Manager          pnpm
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/react
                         @astrojs/mdx

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

No response

Describe the Bug

We were trying to upgrade our astro version from 4 -> 5. We saw some cryptic errors.

Objects are not valid as a React child (found: object with keys {astro:jsx, type, props}). If you meant to render a collection of children, use an array instead.

  Hint:
    This issue often occurs when your MDX component encounters runtime errors.
image

We narrowed down this issue to @astrojs/mdx 4.0.4. Which was released yesterday,
When we downgraded to 4.0.3 everything was working well.

Our code in blog/[id].astro

---
import BlogLayout from "@/layouts/BlogLayout.astro";
import Layout from "@/layouts/Layout.astro";
import { getCollection, getEntry, render } from "astro:content";
export async function getStaticPaths () {
  const allPosts = await getCollection('articles');
    return allPosts.map(post => ({
        params: {
            id: post.id
        }
    }))
}
// 1. Get the slug from the incoming server request

const { id } = Astro.params;
if (id === undefined) {
  return Astro.redirect("/404");
}
// 2. Query for the entry directly using the request slug
const post = await getEntry("articles", id);
console.log("Post",post)
// 3. Redirect if the entry does not exist
if (post === undefined) {
  return Astro.redirect("/404");
}
// 4. Render the entry to HTML in the template
const { Content } = await render(post);
console.log("Content",Content)
---
<!-- Failing here-->
  <Content/>

What's the expected result?

Blog working

Link to Minimal Reproducible Example

https://github.com/withastro/astro

Participation

  • I am willing to submit a pull request for this issue.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Issue needs to be triaged
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant