Wrapped a shacdn-UI React component into Astro JS framework, can't make it work properly.

[santvaz]

Hello, I've been reading through some discussions that people have had in the past about integrating shacdn UI components (React and Tailwind based) into Astro projects.

I'm fairly new to the React and Astro worlds and, to be fair, I'm not very clever on fixing my own issues.

The thing about creating components and being able to reuse them as needed is one of my main concerns. I wanted to make my shacdn component reusable.

The following URL to the original component is here: https://ui.shadcn.com/docs/components/popover

As I've been reading elsewhere, I get the following error when calling a wrapped component that contains children inside:

ChildElement must be used within Element.

Since Astro can't handle children from other UI framework as-is, I have to wrap it. But I want to make it dynamic it to call the component as many times as I want without any issues. My idea was to do something like this:

I would have to wrap this into a .astro extension file.

    <Popover>
      <PopoverTrigger>{Astro.props.title} </PopoverTrigger>
      <PopoverContent>
        <slot name="children"/>
      </PopoverContent>
    </Popover>

The code that actually does work is the following, with a .tsx extension file:

import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover"

export default function WrappedPopover() {
  return (
    <Popover>
      <PopoverTrigger>Añadir lista</PopoverTrigger>
      <PopoverContent>
        <div className="flex flex-col items-center justify-start">
          <form action="post" className="bg-plum-100 rounded-lg min-h-48 w-full flex flex-col justify-center items-center gap-6 divide-y divide-gray-200 p-2 text-plum-900 font-semibold">
            <label htmlFor="list-title">Título de lista</label>
            <input type="text" name="list-title" id="list-title" className="shadow-inner p-2 rounded-lg bg-white focus:bg-gray-100 outline-none focus:ring-1 focus:ring-plum-900"/>
            <input type="submit" value="Añadir" className="bg-plum-800 rounded-lg p-2 text-white cursor-pointer hover:bg-plum-900" />
          </form>
        </div>
      </PopoverContent>
    </Popover>
  );
}

This way, I'd be able to call the component with a personalized popover trigger name and its content. But hell no, it does not work at all.

I honestly have no idea what I'm doing wrong and I really want it this way. I've been reading through other solutions, like inserting text into an array and using '.map' to go through all the content, but that's not my particular case in any way.

If anyone could help me, I would be very thankful.

Thanks in advance,
santvaz

[santvaz]

Okay, fine. I think I've found the solution. The thing is that I don't know React at all, so the problem in some kind of way wasn't Astro but the way I was handling the component coming from React.

I will post what worked for me in case it works for anyone, since there's not much information about using shacdn-ui components that contain children with Astro, all videos and material I've gone through were basic examples of a Button or so, that worked perfectly because they were a single element.

You need the original component: popover.tsx and your own component, you can name it as you please:

I named mine as the following: Wrappedpopover.tsx:

  import {
    Popover,
    PopoverContent,
    PopoverTrigger,
  } from "@/components/ui/popover"

  export default function WrappedPopover({ title, children }) {
    return (
      <Popover>
        <PopoverTrigger>{ title }</PopoverTrigger>
        <PopoverContent>
          { children }
        </PopoverContent>
      </Popover>
    );
  }

Now go to whatever .astro file you are working on and call the component:

---
import WrappedPopover from "../components/ui/WrappedPopover.tsx"; // remember to change your path as needed please!!!
---

<WrappedPopover title="My Popover Component" client:only="react">
            <div>
            My Popover Content
            </div>
</WrappedPopover>

[anishshobithps]

@santvaz I had a doubt, but I am not completely sure about it because its been months now since I have touched Astro framework, my own website is written in Astro (uses shadcn) and I don't remember what I did few months back. I wanted to ask by any chance did you happen to pass client:only="react" anytime before you created WrappedPopver ? Like for the first code block you sent

<Popover client:only="react">
 <PopoverTrigger>{Astro.props.title} </PopoverTrigger>
  <PopoverContent>
    <slot name="children"/>
  </PopoverContent>
</Popover>

[anishshobithps]

Well, according to my understanding you created wrapped only because the popover wouldn't work, basically the wrapped created a wrapper around popover with new props (WrappedPopover.tsx)so that can work with your .astro.

I know you have tried this but it didn't work out for you, I was saying just use Popover directly and use client:only="react" directive, without creating a Wrapper component.

I have some time tomorrow after my uni exam, if your confused what I mean, I can spin up a small codebase with deployed url to show a example, I am myself not sure if its gonna work so I need to see.

[santvaz]

Oh! I apologize, I misunderstood your comment in the first place.

If it's no bother for you, I'll be happy to see what you come up with a your small codebase since, indeed, I couldn't make it work for me. If I try to use the following block of code:

<Popover client:only="react">
  <PopoverTrigger>{Astro.props.title} </PopoverTrigger>
  <PopoverContent>
    <slot name="children" />
  </PopoverContent>
</Popover>

Without previously wrapping the component with Astro, it doesn't let me use it directly because I get the PopoverTrigger must be used within Popover error. When I looked it up a few weeks ago, it had to do with the fact that Astro can't handle direct children from React as-is. When trying to fix it, I found out that it only happens that way, which means if I use components that contain no children from other UI frameworks I would be able to use them directly without having to create a wrapped component.

It's very likely that I'm doing something wrong somewhere, as I'm pretty new to Astro and React. By the way, I'm very thankful of the time you dedicated to answer.

Looking forward to your response !

[anishshobithps]

@santvaz So I did a bit of digging in, and found out its a underlying issue of Astro framework and its a known thing as well, and shadcn has nothing to do with it.

Relevant Sources:
withastro/astro#9412
withastro/roadmap#742
withastro/astro#8835

The only work around now is:
Guide: https://spacemadness.dev/docs/add-a-shadcn-ui-component/

• You will have to refactor the snippet to be contained within a .jsx/.tsx file
• Components in astro run independently so PopoverTrigger may execute before Popover provider does
• Putting it into jsx/tsx will make the usual rules apply.
• https://docs.astro.build/en/concepts/islands/#creating-an-island

As per some sources there is a flag for experimentalReactChildren in the astro.config.mjs under react plugin but it doesn't seem to work in the case.

import { defineConfig } from "astro/config";

import react from "@astrojs/react";
import tailwind from "@astrojs/tailwind";

// https://astro.build/config
export default defineConfig({
  integrations: [
    react({
      experimentalReactChildren: true,
    }),
    tailwind({
      applyBaseStyles: false,
    }),
  ],
});

[anishshobithps]

If you want I can push the code, but yes, you would have to create a wrapper around it to work, annoying but can't help it.

[santvaz]

Your explanation was perfect crystal clear. I should've done a bit more of digging in!

Thank you for your time and help, I appreciate a lot the time you took to look into it and help me out 🙌 For now, all the pieces of information you provided were super useful and more than enough for me.

Best regards,