Skip to content

Astro.slots.render function does not work when invoked from MDX file #4826

@colinbate

Description

@colinbate

What version of astro are you using?

1.2.8

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

None

What package manager are you using?

npm

What operating system are you using?

Stackblitz

Describe the Bug

Recently issue #4818 was completed allowing more convenient use of the Astro.slots.render function.

However, passing a function as the slot to a component doesn't work in an MDX file.

For example in index.mdx

import List from 'List.astro';

## Markdown content here

<List>{item => <li>{item}</li>}</List>

and in List.astro:

---
const items = [
  'item A', 'item B', 'item C', 'item D'
];
---

<ul>
  {items.map(item => (
    <Fragment set:html={Astro.slots.render('default', [item])} />
  ))}
</ul>

This results in the following output of the List component:

item => __vite_ssr_import_5__.jsx(_components.li, { children: item })
item => __vite_ssr_import_5__.jsx(_components.li, { children: item })
item => __vite_ssr_import_5__.jsx(_components.li, { children: item })
item => __vite_ssr_import_5__.jsx(_components.li, { children: item })

It looks as if the toString() value of the function is being returned.

The desired outcome would be for this to function the same way in MDX files as it does in .astro files.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-lwwufa?file=src%2Fcomponents%2FList.astro,src%2Fpages%2Findex.mdx&on=stackblitz

Participation

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

Metadata

Metadata

Assignees

Labels

- P3: minor bugAn edge case that only affects very specific usage (priority)

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions