Html-react-parser: TSエラー：instanceofElementはNext.jsで常にfalseを返します

問題を開いてくれてありがとう@ purp1eeeee

CodeSandboxの例では、React要素を返さないため、replaceは機能しません。 readmeを参照してください。

では、ログをカスタム要素の戻り値に置き換えることができますか？

export default function IndexPage() {
   const html = "<h1>hoge</h1>";
   const options: HTMLReactParserOptions = {
     replace: (domNode) => {
-      console.log(domNode);
-      console.log(domNode instanceof Element);
+      if (domNode.name === "h1") {
+        return <h1>replaced</h1>;
+      }
     }
   };
   return <div>{parse(html, options)}</div>;
 }

更新されたCodeSandboxを参照してください。

私は、次のこの命令、および私も同じ問題を抱えている、私は、プロパティを取得することはできませんattribsからdomNode 。

タイプスクリプトチェックdomNodeはElementタイプではなく、 DOMNodeインスタンスであるため、 DOMNodeにはattribsがないため、エラーが発生します。財産。

また、この条件console.log(domNode instanceof Element)を確認すると、domNodeのインスタンスがDOMNodeであるため、戻り値は常にfalseになります。

私はこれに対する解決策を持っています、多分助けることができます。 パラメータdomNodeでElementタイプを定義しました。

import parse, { HTMLReactParserOptions } from "html-react-parser";
import { Element } from "domhandler/lib/node";

export function contentHandler(postContent: string) {
  const options: HTMLReactParserOptions = {
    replace: (domNode: Element) => {
      if (domNode.attribs) {
        if (domNode.attribs.id === 'shortcode') {
          return <div className="leadform">Shortcode</div>;
        }
      }
    },
  };

  return parse(postContent, options);
}

Next.jsプロジェクトでも同じ問題が発生していることを確認できます。 Typescript型キャストdomNodeは、html-react-parserをアップグレードした後の唯一の回避策のようです。

@kakaeriel
とても良い！ ありがとう👍

Typescriptプロジェクトでこれらの問題を抱えている。 @kakaerielのように、 のセクションを含め、replaceに関するこの指示に従っています

@kakaerielからの解決策は私のために働きます。 instanceof演算子は機能しません（要素は型ではありません）。数時間後にnode_modulesを参照して型定義を探した後、この回避策を見つけることは命の恩人です。

代替ソリューション@kakaerielを提供していただきありがとうございます。 README.mdドキュメントを改善するためのPRの作成に興味がありますか？

@remarkablemarkはい、確かに！ できるだけ早くPRを作成します。

わお。 NextJSを使用しても同じ問題が発生します。

タイプスクリプトチェックdomNodeはElementタイプではなく、 DOMNodeインスタンスであるため、 DOMNodeにはattribsがないため、エラーが発生します。財産。

`` `

では、なぜこれがNextJSアプリでのみ発生するのでしょうか。
私はreact-scriptstypescriptアプリをセットアップし、そこで動作します。
https://codesandbox.io/s/html-parsing-and-replacing-elements-yjtv7?file=/src/index.tsx

@ Naxos84がわかりません。 Next.jsのTypeScript構成が異なるに違いありません。 回避策については、 @ kakaerielのソリューションを確認してください。

@kakaerielは、回避策でREADME.mdを更新するためにPRを開くことができるかどうかを知らせてくれます。 あなたがそれをすることができないならば、私はそれをすることができます。 ありがとう！

NextJs関連ではないと思います。
私はもう少し試してみましたが、それはどういうわけかうまくいきました。
Stack Overflowで説明したように、 @ remarkablemark codesandboxを変更し、 console.log(domElement.constructor)を追加しました。

結果は次のようになります。

なんでいきなり動いてるのかわからない！？

「私の」nextjsプロジェクトでは機能していませんが。
更新：そして今、それは再び機能していません....

カスタムタイプガードを使用することをお勧めします。

const isElement = (domNode: DOMNode): domNode is Element => {
    const isTag = domNode.type === "tag";
    const hasAttributes = (domNode as Element).attribs !== undefined;

    return isTag && hasAttributes;
};

const parserOptions: HTMLReactParserOptions = {
    replace: domNode => {
        if (isElement(domNode)) {
            return <p>It's an element.</p>;
        } else {
            return <p>It's something else</p>;
        }
    },
};

みなさん、このソリューションでNext.js10.xでこれを修正することができました。 これは、私の現在の実装の詳細を見つけることができる公開の要点です。 このソリューションでは、セットアップでタイプエラーが発生していません。

@natterstefanソリューションを共有していただきありがとうございます。

NextJSでも同じ問題があります。 要素は常に未定義です。 domNodeをanyと入力し、オプションタイプをHTMLReactParserOptionsに変換しました。 domhandlerの要素がSSRで機能しませんか？

const options = {
  replace: (domNode: any) => {
      // ...
  }
} as HTMLReactParserOptions;

私は以下のコードでこれを修正することができました、それが役立つことを願っています