Hero img
Gatsby MDXエラー

MDXのv2を使用するとエラーになった

gatsbyの周りのプラグインreact@18.2.0等バージョンアップしたらnode_modules\gatsby-plugin-mdx\utils\mdx.js to a dynamic import() which is available in all CommonJS modules.エラーが発生してしまった。


目次

  • MDXエラーが表示された。
  • 解決?
  • nvmrc
  • netlifyでの対策
  • まとめ

MDXエラーが表示された。

react@18.2.0にバージョンを上げたところ

node_modules\gatsby-plugin-mdx\utils\mdx.js to a dynamic import() which is available in all CommonJS modules.

なんかエラーが発生してしまった。バージョンアップはこれだから困る...
検索してみたらどうやら@mdx-js/reactのバージョンはv2が標準らしいが、gatsbyがv2に対応していないらしい。 そのためv1を使用してくださいとのこと。
仕方ないので言われた通りにバージョンを下げることにした。

npm uninstall @mdx-js/mdx @mdx-js/react
npm install @mdx-js/mdx@v1 @mdx-js/react@v1

installが正常にできない場合 --legacy-peer-depsを付ければいけるらしい。

解決?

localでのビルドしてみると無事にビルドが通ったが、netfliy等では別のエラーが発生してしまった

could not resolve dependency:
peer react@"16. ...."

要するにmdx@v1は古いのでreact18.2は対応していませんよということみたいです。 エラーの内容をよく読んでみると書かれているように--legacy-peer-depsを付けたら良いみたい。

nvmrc

プロジェクトのルートにnvmrcを追加し legacy-peer-deps=trueを記入

legacy-peer-deps=true

通常はこれだけでほとんどの環境で問題は無いはず

netlifyでの対策

個別でnetlifyでエラーが起きる場合 環境変数で--legacy-peer-depsを追加した。 netlifynpmflag.jpg nvmrcだけで対策ができるはずなのだがうまくいかずに環境変数にも記入した。 今現在は環境変数にに書かなくてもnvmrcファイルだけで大丈夫になっている。

まとめ

nvmrcを作り、legacy-peer-deps=trueを追加すれば大体解決するはず。

関連記事

コメント

コメントを書く

質問や、間違いがありましたら、お気軽にどうぞ

※お名前とコメントの内容を入力してください。
※全てこのブログ上に公表されます。
※許可なく管理者によって修正・削除する場合がございます。 詳しくはプライバシーポリシーを参照ください