🍣

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

3 min read

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

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

問題

next.jsをreact-markdownを使ってマークダウンからブログ記事を書くような利用は多いということは、関連記事の多さからも異論はないと思います。
私も1年前からこの組み合わせでブログ書いたりしています。最近マークダウンを使用する別のサイトのプロジェクトを作成し、react-markdownとそのプラグインであるremark-gfmrehype-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がどうのこうのなエラーなんです。
ネットで調べて、以下のようなサイトを参考に色々対策しましたが、解決しません。

https://zenn.dev/tomon9086/scraps/3a1d9d3eed4864

https://qiita.com/yk2220s/items/8ed4d781412f6c4e9c45

解決

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

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もv5からv6で大きく更新されたようで、記法も変わっており、たかだか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

ログインするとコメントできます