🍣

react-markdownで詰まったのでメモ

2021/08/08に公開

Next.js

next.jsで新しいプロジェクトを作っている際にハマってしまった問題に関しての解決策です。

この問題に関しては、バージョンに起因すると思われますので、2021年8月時点での話であり、新しいバージョンが出ている場合は、解決しているかもしれません。
それまでの参考までにご活用ください。

問題

next.jsをreact-markdownを使ってマークダウンからブログ記事を書くような利用は多いということは、関連記事の多さからも異論はないと思います。
私も１年前からこの組み合わせでブログ書いたりしています。最近マークダウンを使用する別のサイトのプロジェクトを作成し、react-markdownとそのプラグインであるremark-gfmやrehype-rawを使用した際に、以下のようなエラーが出ました。

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /src/high_school_zyouhou/node_modules/hast-util-raw/index.js
require() of ES modules is not supported.
require() of /src/high_school_zyouhou/node_modules/hast-util-raw/index.js from /src/high_school_zyouhou/.next/server/pages/what_is_this.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /src/high_school_zyouhou/node_modules/hast-util-raw/package.json.

    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1080:13)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.hast-util-raw (/src/high_school_zyouhou/.next/server/pages/what_is_this.js:391:18)
    at __webpack_require__ (/src/high_school_zyouhou/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///./node_modules/rehype-raw/index.js:5:71)
    at Object../node_modules/rehype-raw/index.js (/src/high_school_zyouhou/.next/server/pages/what_is_this.js:286:1)
    at __webpack_require__ (/src/high_school_zyouhou/.next/server/webpack-runtime.js:33:42) {
  code: 'ERR_REQUIRE_ESM'
}

なんかES Moduleがどうのこうのなエラーなんです。
ネットで調べて、以下のようなサイトを参考に色々対策しましたが、解決しません。

解決

最初に使用していたモジュールのバージョンは以下の通りです。

package.json

  "dependencies": {
    "algoliasearch": "^4.10.3",
    "github-markdown-css": "^4.0.0",
    "gray-matter": "^4.0.3",
    "next": "11.0.1",
    "next-transpile-modules": "^8.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-instantsearch-dom": "^6.12.0",
    "react-lottie": "^1.2.3",
    "react-markdown": "^6.0.3",
    "react-syntax-highlighter": "^15.4.4",
    "rehype-raw": "^6.0.0",
    "remark-gfm": "^2.0.0"
  },

それを次のようにダウングレードしたら、上手くいきました。またプラグインの方が新しいreact-markdownに対応していないのかも知れません。
react-markdownもv５からv６で大きく更新されたようで、記法も変わっており、たかだか1年弱ですが浦島太郎気分でした。
ハマっている人がいましたら是非参考にしてください。

package.json

  "dependencies": {
    "algoliasearch": "^4.10.3",
    "github-markdown-css": "^4.0.0",
    "gray-matter": "^4.0.3",
    "next": "11.0.1",
    "next-transpile-modules": "^8.0.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-instantsearch-dom": "^6.12.0",
    "react-lottie": "^1.2.3",
    "react-markdown": "^6.0.3",
    "react-syntax-highlighter": "^15.4.4",
    "rehype-raw": "^5.1.0",
    "remark-gfm": "^1.0.0"
  },

まとめ

これは今後のプラグインのアップデートで解消されると思いますし、もしかした私の環境が原因の可能性もあります。
しかし、ハマっている人もいるかも知れないと記事にしました。誰かの役に立てば幸いです。

問題

解決

まとめ

Discussion