hydration error (yay)

export function ParagraphComponent({ ...props }) {
  if (typeof props.children === "string") {
    if (props.children.startsWith("||")) {
      return (
        <div className="w-full font-bold h-fit pt-[14px] pr-[10px] pb-[15px] pl-[22px] border-l-[5px] border-[#FBE900] bg-[#b5ac48] rounded-[5px] ">
          <p className=" md:text-[14px] text-[10px]">
            {props.children.replace("||", "").trim()}
          </p>
        </div>
      );
    }
  }

  if (Array.isArray(props.children) && props.children.length >= 2) {
    if (typeof props.children[0] === "string") {
      if (
        typeof props.children[1] === "object" &&
        props.children[1].props &&
        props.children[1].props.href
      ) {
        const youtubeHref = props.children[1].props.href;

        return (
          <div className="w-full xl:h-[500px] h-[200px]">
            <iframe
              width="100%"
              height="100%"
              src={`https://www.youtube.com/embed/${youtubeHref}?si=XVfG_6H3a3FUAgX2`}
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
        );
      }
    }
  }

  return (
    <p className=" md:text-[14px] text-[10px] text-shades-white">
      {props.children}
    </p>
  );
}

@Arinji jsx export function ParagraphComponent({ ...props }) { if (typeof props.children === "string") { if (props.children.startsWith("||")) { return ( <div className="w-full font-bold h-fit pt-[14px] pr-[10px] pb-[15px] pl-[22px] border-l-[5px] border-[#FBE900] bg-[#b5ac48] rounded-[5px] "> <p className=" md:text-[14px] text-[10px]"> {props.children.replace("||", "").trim()} </p> </div> ); } } if (Array.isArray(props.children) && props.children.length >= 2) { if (typeof props.children[0] === "string") { if ( typeof props.children[1] === "object" && props.children[1].props && props.children[1].props.href ) { const youtubeHref = props.children[1].props.href; return ( <div className="w-full xl:h-[500px] h-[200px]"> <iframe width="100%" height="100%" src={`https://www.youtube.com/embed/${youtubeHref}?si=XVfG_6H3a3FUAgX2`} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen ></iframe> </div> ); } } } return ( <p className=" md:text-[14px] text-[10px] text-shades-white"> {props.children} </p> ); }

Ray

2024-02-03T03:56:38.000Z

try comment out the iframe

ArinjiOP

2024-02-03T03:56:44.000Z

oki

no work

Expected server HTML to contain a matching <div> in <p>.

@Ray try comment out the iframe

ArinjiOP

2024-02-03T03:59:52.000Z

cant we just suppress hydration errors from the markdown part

Ray

2024-02-03T04:00:08.000Z

try comment out these line

return (
        <div className="w-full font-bold h-fit pt-[14px] pr-[10px] pb-[15px] pl-[22px] border-l-[5px] border-[#FBE900] bg-[#b5ac48] rounded-[5px] ">
          <p className=" md:text-[14px] text-[10px]">
            {props.children.replace("||", "").trim()}
          </p>
        </div>
      );

ArinjiOP

2024-02-03T04:00:13.000Z

oki

@Arinji cant we just suppress hydration errors from the markdown part

Ray

2024-02-03T04:00:24.000Z

yeah you could lol

@Ray try comment out these line ts return ( <div className="w-full font-bold h-fit pt-[14px] pr-[10px] pb-[15px] pl-[22px] border-l-[5px] border-[#FBE900] bg-[#b5ac48] rounded-[5px] "> <p className=" md:text-[14px] text-[10px]"> {props.children.replace("||", "").trim()} </p> </div> );

ArinjiOP

2024-02-03T04:00:41.000Z

same thing

@Ray yeah you could lol

ArinjiOP

2024-02-03T04:00:54.000Z

how do i do it tho

Ray

2024-02-03T04:01:02.000Z

how about comment out these too

return (
          <div className="w-full xl:h-[500px] h-[200px]">
            <iframe
              width="100%"
              height="100%"
              src={`https://www.youtube.com/embed/${youtubeHref}?si=XVfG_6H3a3FUAgX2`}
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
        );

ArinjiOP

2024-02-03T04:01:14.000Z

@Ray how about comment out these too ts return ( <div className="w-full xl:h-[500px] h-[200px]"> <iframe width="100%" height="100%" src={`https://www.youtube.com/embed/${youtubeHref}?si=XVfG_6H3a3FUAgX2`} title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen ></iframe> </div> );

ArinjiOP

2024-02-03T04:01:20.000Z

i have everything commented

export function ParagraphComponent({ ...props }) {
  console.log(props);
  /* if (typeof props.children === "string") {
    if (props.children.startsWith("||")) {
      return (
        <div className="w-full font-bold h-fit pt-[14px] pr-[10px] pb-[15px] pl-[22px] border-l-[5px] border-[#FBE900] bg-[#b5ac48] rounded-[5px] ">
          <p className=" md:text-[14px] text-[10px]">
            {props.children.replace("||", "").trim()}
          </p>
        </div>
      );
    }
  }
  */

  /*if (Array.isArray(props.children) && props.children.length >= 2) {
    if (typeof props.children[0] === "string") {
      if (
        typeof props.children[1] === "object" &&
        props.children[1].props &&
        props.children[1].props.href
      ) {
        const youtubeHref = props.children[1].props.href;

        return (
          <div className="w-full xl:h-[500px] h-[200px]">
            <iframe
              width="100%"
              height="100%"
              src={`https://www.youtube.com/embed/${youtubeHref}?si=XVfG_6H3a3FUAgX2`}
              title="YouTube video player"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
              allowFullScreen
            ></iframe>
          </div>
        );
      }
    }
  }
  */

  return (
    <p className=" md:text-[14px] text-[10px] text-shades-white">
      {props.children}
    </p>
  );
}

@Arinji i have everything commented

Ray

2024-02-03T04:02:03.000Z

how about changing this

<div>
<p className=" md:text-[14px] text-[10px] text-shades-white">
      {props.children}
    </p>
</div>

ArinjiOP

2024-02-03T04:02:15.000Z

oki

still broken, just noticed this btw
Component Stack
div
p
div
li
ul
div
div
main

want me to track it?

Ray

2024-02-03T04:04:37.000Z

where is ul li?

ArinjiOP

2024-02-03T04:05:45.000Z

uh here

wait this is the markdown btw

A custom domain allows you to have a professional looking domain such as **example.net** or **play.example.net**.

- Go to your [NameCheap dashboard](https://ap.www.namecheap.com/).
- Select your domain and click **Manage**.
  ![](https://storage.crisp.chat/users/helpdesk/website/edd4387938180800/image_15o3twu.png)
- Click **Advanced DNS**.
  ![](https://storage.crisp.chat/users/helpdesk/website/edd4387938180800/image_sa5jum.png)

**With a dedicated IP:**
If you have a [dedicated IP](/en/article/what-are-dedicated-ips-pex5da/), you are not required to make a SRV record, as you have Minecraft Java's default port.

- Press **Add New Record**, then select **A Record**.
  ![](https://storage.crisp.chat/users/helpdesk/website/edd4387938180800/image_c8266r.png)
- In the Host box, type **@** if you want it to be just your domain, or you can put play/mc if you wish for that to be the domain prefix (play.revivenode.com/mc.revivenode.com).
- In the IP Address box, type your Minecraft server's IP (without the port).
  ![](https://storage.crisp.chat/users/helpdesk/website/edd4387938180800/image_1ulpqs4.png)
- Finally press the green tick.

- If you put a **@** in the **A** record, you should use the first one, if you used play/mc/anything else, you need to use the second one.

|| This can take up to 2 hours to update and start working!

${youtube}[](YB-oyfnryTk)