Astro files will not render children of Qwik components with Qwik's <Slot />

[thejackshelton]

If we normally try to pass in children of a JSX component in an Astro file, it would be done like this:

inside MyReactComponent:

import React from 'react';

const MyReactComponent = ({ children }) => {
  return (
    <div>
      {children}
    </div>
  );
};

export default MyReactComponent;

in index.astro

---
import MyReactComponent from './MyReactComponent.jsx';
---

<MyReactComponent>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</MyReactComponent>

In Qwik, we also use slots, rather than JSX children.

If we use Qwik's Slot component:

import { Slot } from '@builder.io/qwik' 

export const MyQwikComponent = (props) => {
  return (
    <div {...props}>
      <Slot />
    </div>
  );
};

index.astro

---
import MyQwikComponent from './MyQwikComponent.tsx';
---

<MyQwikComponent>
  <h1>Hello, world!</h1>
  <p>This is a paragraph.</p>
</MyQwikComponent>

This causes an error, and will not render anything.

user made issue: https://github.com/QwikDev/astro/issues/14

reproduction: https://github.com/thejackshelton/astro-qwik-slot-repro

stackblitz: https://stackblitz.com/~/github.com/thejackshelton/astro-qwik-slot-repro

[elyonz]

I am trying out content collections and rendering the MDX output in Astro. Same error happens even when not using any other integrations.

---
import { getEntry, type CollectionEntry } from "astro:content";
import { Heading } from "@/components/slices/Heading";

interface Props {
  id: CollectionEntry<"slice-heading">["slug"];
}
const { id } = Astro.props;
const res = await getEntry("slice-heading", id);
const { Content } = await res.render();
---

<Heading data={res.data}>
  <Content />
</Heading>

[thejackshelton]

I am trying out content collections and rendering the MDX output in Astro. Same error happens even when not using any other integrations.

---
import { getEntry, type CollectionEntry } from "astro:content";
import { Heading } from "@/components/slices/Heading";

interface Props {
  id: CollectionEntry<"slice-heading">["slug"];
}
const { id } = Astro.props;
const res = await getEntry("slice-heading", id);
const { Content } = await res.render();
---

<Heading data={res.data}>
  <Content />
</Heading>

Hey @elyonz! This will be fixed once https://github.com/BuilderIO/qwik/pull/5442 is merged into Qwik core and a new version is released 👍

[thejackshelton]

Ok @elyonz try 0.1.16

[aleksdotbar]

I was struggling with it just now. I came here and literally saw you post an update in real time. 😄

It seems to work fine now at first glance.

Thank you!

[thejackshelton]

I was struggling with it just now. I came here and literally saw you post an update in real time. 😄

It seems to work fine now at first glance.

Thank you!

Awesome! I think named slots might cause a problem, but regular Qwik Slot components should work great for now. Will try to figure out if we need to fix named slots.

[elyonz]

Thanks! The main error has been resolved, now it's just the collection Content component that has this warning.

QWIK WARN A unsupported value was passed to the JSX, skipping render. Value: {
  'astro:jsx': true,
  type: 'p',
  props: { children: 'Some markdown text..' },
  [Symbol(astro:renderer)]: 'astro:jsx'
}

[thejackshelton]

Thanks! The main error has been resolved, now it's just the collection Content component that has this warning.

QWIK WARN A unsupported value was passed to the JSX, skipping render. Value: {
  'astro:jsx': true,
  type: 'p',
  props: { children: 'Some markdown text..' },
  [Symbol(astro:renderer)]: 'astro:jsx'
}

Would you be able to make a reproduction of the warning?

[elyonz]

Sure here you go: (Click on Blog => Post 1 or Post 2) qwik component with Slot in pages/blog/[...slug].astro https://stackblitz.com/edit/withastro-astro-gpa8oc?file=src%2Fpages%2Fblog%2F%5B...slug%5D.astro

The problem occurs when you want to render an .mdx file, the .md files are fine.

[elyonz]

@thejackshelton Did you have time to take a look at the reproduction?

[thejackshelton]

@thejackshelton Did you have time to take a look at the reproduction?

Oh wait is mdx not working with Qwik? Or is it only the warning?

Regardless I should have some time to look at it today, thank you for reminding me @elyonz

[elyonz]

@thejackshelton Did you have time to take a look at the reproduction?

Oh wait is mdx not working with Qwik? Or is it only the warning?

Regardless I should have some time to look at it today, thank you for reminding me @elyonz

Correct, You can't render MDX content from Astro. Probably some special case where the rendering should be passed back to Astro, there are no other integrations active.