search

skyra-project / discord-components

Discord Webcomponents for real looking messages on the web
MIT License
244 stars 31 forks source link

bug: MessageReply not rendering in docusaurus #408

Closed PAdventures closed 2 weeks ago

PAdventures commented 2 weeks ago

Is there an existing issue for this?

Description of the bug

Using an MDX file trying to render a discord message that replies to another message. The DiscordReply is located inside a DiscordMessage and it is not rendered at all.

Steps To Reproduce

  1. Start a docusaurus project
  2. Create an MDX file
  3. Add this code: 
    
import { DiscordMessages, DiscordMessage, DiscordReply } from "@skyra/discord-components-react"

<DiscordMessages style={{ borderRadius: 6 }}>

!ping;true 
<DiscordMessage bot="true" verified="true" author="Vortexus.js" avatar="/img/logo.svg">
    <DiscordReply slot="true" author="PAdventures" avatar="/img/padventures.png" >!ping;true</DiscordReply>
    Pong
</DiscordMessage>
<DiscordMessage author="PAdventures" avatar="/img/padventures.png">ping true</DiscordMessage>



### Expected behavior

The DiscordReply should be rendered

### Screenshots

_No response_

### Additional context

_No response_
favna commented 2 weeks ago

Please try the v4 alpha version and reference the Docusaurus link on the readme (https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-docusaurus-ts). As can be seen on the Stackblitz, it does work there. That said, you should render them from custom .tsx files and include those in your MDX files because Docusaurus doesn't properly process the components when inlined.

PAdventures commented 2 weeks ago

Please try the v4 alpha version and reference the Docusaurus link on the readme (https://stackblitz.com/github/skyra-project/discord-components-implementations/tree/main/templates/react-docusaurus-ts). As can be seen on the Stackblitz, it does work there. That said, you should render them from custom .tsx files and include those in your MDX files because Docusaurus doesn't properly process the components when inlined.

It looks like your suggestion is working and using the .tsx file to render the components. Sorry if I caused too much trouble.

favna commented 2 weeks ago

No trouble at all! V4 in particular isn't very clear of being a thing. I'm working on processing the remainder issues and then I want to release it to stable.