search

withastro / astro

The web framework for content-driven websites. ⭐️ Star to support our work!
https://astro.build
Other
46.8k stars 2.49k forks source link

🐛 BUG: Renders [object Object] string with ReactJSX on Astro layouts template with MDX integration #4118

Closed ryanmr closed 2 years ago

ryanmr commented 2 years ago

What version of astro are you using?

1.0.0-rc.3

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

Describe the Bug

I have a src/layouts/BlogPost.astro as shown in the docs/starter for the astro blog, and I added the mdx integration.

Here's the BlogPost.astro:

---

// react/jsx components to import 

import { LikeButton } from "../components/LikeButton";
import { Clicker } from "../components/Clicker";

export interface BlogPostTemplateProps {
  title: string;
  description: string;
  publishDate: string;
  updatedDates?: string[];
  heroImage?: {
    src: string;
    alt: string;
  };
  url: string;
}

const { title, description, publishDate, updatedDates, url } =
  Astro.props as BlogPostTemplateProps;

const canonicalURL = new URL(Astro.url.pathname, Astro.site).pathname;
---

<html>
  <!-- simplified the template for this example -->

  <body>
    <main>
      <div>
        <h1>{title}</h1>
        <slot />
      </div>

      <LikeButton pageUrl={canonicalURL} client:visible />
      <Clicker client:load />
    </main>
  </body>
</html>

Here's the basic mdx file:

---
title: "Astro editing"
description: "Bring your markdown, we'll handle the rest"
publishDate: "11 Jul 2022"
---

import BlogPost from '../../layouts/BlogPost.astro';

<BlogPost {...frontmatter}>
**Astro has built-in support for markdown pages!** All frontmatter data will be available [via `Astro.glob` imports](https://docs.astro.build/en/reference/api-reference/#astroglob) as well, making blog landing pages easy to build.

**Code challenge:** Try editing the `title` frontmatter property for this post and [visiting the homepage](/) again.

## Code block demo

```typescript
// Oh, and get Shiki syntax highlighting out-of-the-box!
// See our docs for customization options:
// https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting
function getDistance(amount: number) {
  if (amount === Infinity) {
    return "and beyond!";
  } else {
    return "and the normal distance!";
  }
}



The layout syntax above based on [importing layouts manually](https://docs.astro.build/en/guides/integrations-guide/mdx/#importing-layouts-manually).

When the MDX page `/posts/a-post` is rendered, the layout `<BlogPost>...</BlogPost` renders OK but the ReactJSX components also render out with `[object Object]` and do not function.

<img width="656" alt="image" src="https://user-images.githubusercontent.com/13507/182257690-d0ae19d2-353d-4055-9e54-29f59c021470.png">

### Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-hnsfp7?file=src/pages/index.astro

### Participation

- [ ] I am willing to submit a pull request for this issue.
mayank99 commented 2 years ago

This bug also happens when using the layout property in frontmatter: https://stackblitz.com/edit/github-hjcd9x?file=src%2Fpages%2F_layout.astro

Also, in my local project, the react component is used in the .mdx file (not in the layout) and this bug still happens there. Unfortunately i was not able to reproduce that in stackblitz.