Gatsby.js で md から mdx にしたら、テーブルが表示されなかったときの解決方法についてまとめました

関係したプラグインと原因

プラグイン

• gatsby-plugin-mdx
• remark-gfm

原因（たぶん）

configファイルによる記述方法が間違っていた。

プラグインのバージョンによって、うまくいかないことがある。

remark-gfm のバージョンを下げた

自分はもともと 4 を使っていましたが、

Cannot set properties of undefined (setting 'inTable')

というエラーが出たため、

npm install remark-gfm@3.0.1 --save

に落としました。

gatsby.config.js を mjs に変更した

config で import をするため、gatsby.config.mjsにファイル名を変更し、既存のコードをmjsのコードに修正しました。

修正といっても、

module.exports = {

の部分を

export default {

に変更したくらいです。

これで import が使えるようになったので、以下のようにプラグインを追加しました。

gatsby.config.mjs

import remarkGfm from "remark-gfm"

//~~~~~~

{
  resolve: `gatsby-plugin-mdx`,
  options: {
    mdxOptions: {
      remarkPlugins: [remarkGfm], //追加
    },
    extensions: [`.mdx`, `.md`],
    gatsbyRemarkPlugins: [
      //略
  },
}

終わりに

以上、自分が解決した方法でした。

誰かの参考になれば幸いです。

軽い気持ちでマークダウンでデータベース作って、マークダウンファイル内でデータ取得して表示するページを作ろうとか思って着手したら、時間かかりすぎてもう普通に pages に js で作ってしまった方が楽だったのではと後悔しながらこの記事を書いているそんな春（くもり）でした。