ReactMarkDownでテーブルのエラーを解消する

  • 投稿日
  • 著者 しんぺー
  • カテゴリー Code
  • カテゴリー React

マークダウンをHTMLにトランスパイルしてくれるReactMarkDownを使用していましたが、最新バージョンでエラーになり、詰まったので解決方法をメモに残しておきます。
こんな感じのエラーが出ました。

TypeError Cannot set properties of undefined (setting 'inTable')

シンプルなマークダウンであれば、ReactMarkDownでうまいこと変換してくれるのですが、少し複雑なマークダウンを変換するときには、専用のプラグイン（gfm）を使用するのですが、これらのライブラリのバージョンが原因でエラーになりました。

プラグインが必要なマークダウンの種類

  • 脚注
  • 取り消し線
  • 表
  • タスクリスト
  • URLのサポート

エラーの原因

remark-gfmがV4になった時に、react-markdown V8との互換性がなくなりエラーになったようです。
react-gfmをV3にダウングレードするとエラーは解消されました。

"react-markdown": "^8.0.7",
"remark-gfm": "^3.0.1",

remark-gmをV3にダウングレードする

npm install -S remark-gfm@3.0.1

react-markdownがV9にアップデート

react-markdownがV9にアップデートし、このエラーは解消されるようですが自分の環境ではうまく行きませんでした。
一度試してみてうまく行かないようであれば、上記のバージョンにしてあげるといいかもしれません。

まとめ

react-markdownとremark-gmでエラーがでたらバージョンの互換性を確認してみてください。