MDXエラーが表示された。

[email protected]にバージョンを上げたところ

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を追加した。 nvmrcだけで対策ができるはずなのだがうまくいかずに環境変数にも記入した。 今現在は環境変数にに書かなくてもnvmrcファイルだけで大丈夫になっている。

まとめ

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