Durante o desenvolvimento da aplicação React que mostra posts com texto formatado (Markdown), apareceu no console o seguinte erro:
"Falha ao executar 'removeChild' em 'Node': O nó a ser removido não é filho deste nó."
Esse erro acontece quando o React tenta mexer em uma parte da página que já não está onde ele espera. No nosso caso, isso foi causado por imagens e códigos HTML dentro do texto dos posts.
Por que isso aconteceu? Os posts têm imagens e outros códigos HTML dentro do texto (Markdown), por exemplo:
(
)
Quando o React tentava mostrar essas imagens e esse conteúdo, ele se confundia na hora de atualizar a página e gerava esse erro.
Como eu resolvi? Eu usei dois plugins especiais no componente que mostra o texto formatado:
rehype-raw: ajuda o React a entender e mostrar o HTML que está dentro do texto.
rehype-sanitize: garante que esse conteúdo seja seguro, evitando possíveis códigos perigosos.
Ficou assim:
<ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
{post.texto}
</ReactMarkdown>
Além disso, para ajudar o React a entender melhor quando o conteúdo muda, coloquei uma “chave” única no container do texto:
<div key={post.id} className="post-markdown-container">
<ReactMarkdown rehypePlugins={[rehypeRaw, rehypeSanitize]}>
{post.texto}
</ReactMarkdown>
</div>
Resultado Depois dessas mudanças, o erro sumiu e as imagens e conteúdos HTML dentro do texto passaram a aparecer corretamente, sem problemas.
Espero que essa dica ajude caso você também encontre esse problema!
