Parsing self-closing components the wrong way?

[torbjorn-stabo]

Hi. I have this in the middle of an HTML string:

<Image src="/img/faktasidor/collagefakta.jpg" alt="" width="350" height="64" />

I then run this:

  import GradientHeader from '@/components/GradientHeader/GradientHeader'
  import Image from 'next/image'
  import Link from 'next/link'

  const options : HTMLReactParserOptions = {
    htmlparser2: {
      lowerCaseTags: false,
    },
    replace(domNode) {
      if (!domNode.name) {
        return domNode;
      }
      
      if (domNode.name === 'GradientHeader') {
        return <GradientHeader>{domToReact(domNode.children)}</GradientHeader>
      }
      if (domNode.name === 'Link') {
        return <Link  key={domNode.attribs.href}{...domNode.attribs}>{domToReact(domNode.children)}</Link>
      }
      if (domNode.name === 'Image') {
        return <Image key={domNode.attribs.src} {...domNode.attribs} />
      }
      
      return domNode;
    }
  }

  return (
    <>
      {parse(html, options)}
    </>
  );

The weird thing is that the HTML "stops" after the first element in the string. The element is rendered, though, an is rendered as expected from Next.js . So the page is cut short. But if I change the <Image ... /> elements to one of these I get the whole page:

<Image src="/img/faktasidor/collagefakta.jpg" alt="" width="350" height="64"></Image>

<img src="/img/faktasidor/collagefakta.jpg" alt="" width="350" height="64"/>

..so it seems it's not a problem with self-closing elements but the element? and both seem to work, I guess because they're not empty? Using html-react-parser 5.0.10.

[remarkablemark]

@torbjorn-stabo whereas <img> is self-closing, <Image> is not since it's a custom element. Let me know if that makes sense

[torbjorn-stabo]

Fair enough, I get what you're saying. Thank you for answering. But isn't <Post /> in this post a self-closing custom element? Still, changing <Image /> to <Image></Image> is doable for me and solves that problem, so thanks again.

(Should I move this to a new thread?) The sign of success is a new error message, so:
Part of the HTML code being parsed/replaced looks like this:

<GradientHeader>
  <Link href="mypage.htm">
    My page
  </Link>
</GradientHeader>

(The way I interpret it) The <GradientHeader> is replaced using the code in my previous post, but the <Link> child element it seems isn't. Browser dev tools inspection says there are <link> elements inside the HTML converted <GradientHeader>, and in the console I get '<Link /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.'. Do I need like a multi-pass replace() run or something?

[remarkablemark]

Good point @torbjorn-stabo. Do you mind creating a quick reproducible example using CodeSandbox? This will help us verify how the HTML is being rendered.

[torbjorn-stabo]

Sure. upbeat-farrell-v7x25k HTH. For some reason I couldn't get lowerCaseTags to work, so the namechecks in replace() are in lowercase. I guess things still work though, at least in this case.

The child <Link> isn't replaced, as can be seen in the example.

[remarkablemark]

I figured out the reason why <Link> isn't replaced:

1. On the client-side, your custom elements are getting lowercased
2. <Link> becomes <link>
3. <link> is a void element so it will self-close
4. This forces the text to be parsed as a sibling rather than a child of <link>
5. Lastly, you forgot to pass options to domToReact(), which is why replace was not called for the children

My fix was the following (see CodeSandbox):

1. Pass options to domToReact() on line 20:

   -<GradientHeader>{domToReact(domNode.children)}</GradientHeader>
   +<GradientHeader>{domToReact(domNode.children, options)}</GradientHeader>

2. Rename Link to CustomLink on lines 9 and 11:

   -<Link href="#">
   +<CustomLink href="#">

3. Rename link to customlink on line 22:

   -} else if (domNode.name === "link") {
   +} else if (domNode.name === "customlink") {