こんにちは、エンジニアのオオバです。
Next.jsで動いている本ブログ。
バージョンはv10.2.3。
最新はバージョン11系です。
更新頻度が高いため、
11系にアプデしたところ、
エラーが起きてしまったので、
対処方法の共有です。
Reactのバージョンアップが必要
pacjage.jsonの書き換え
// 変更前
"react": "^16.13.1",
↓
// 変更後
"react": "^17.0.2",
Reactのバージョンを上げることで
Next.js11へのアップデートは無事に完了しました。
以降、詳細を共有します。
→11万文字で徹底解説した「DOTweenの教科書」Unityアニメーションの超効率化ツールはこちら
'react/jsx-runtime'エラー発生
"next": "^11.1.2",
Next.jsを最新の11.1.2にアップデートしたところ、
Reactでエラーが起きました。
ModuleNotFoundError: Module not found: Error: Can't resolve 'react/jsx-runtime' in '/vercel/path0/pages'
このようなエラー。
Reactのバージョンアップが必要
Reactのランタイムでエラーが起きているということで、
React自体のバージョンアップが必要だと予測が付きます。
変更前 package.json
"react": "^16.13.1",
現状のReactバージョンは16.13.1です。
React17系にアップデート
変更後 package.json
"react": "^17.0.2",
package.jsonを変更し、
モジュール更新します。
$ npm update
すると正常に動き出しました。
まとめ : Next.js11へのバージョンアップはReactの更新も必要でした
記事の内容をまとめます。
- Next.jsを11系にアップデート
- Reactを17系にアップデート
- React16系ではランタイムエラーが起きる
こんな感じです。
Next.jsのアップデートの更新頻度が早く、
もたもたしていると、アプデに余計なコストが掛かります。
できるだけ最新バージョンを維持して
ブログを運営していきたいところです。
この記事が気に入ったらフォローしよう
「Unity初心者大学」というUnity初心者向けのYouTube始めました！！
ぜひチャンネル登録をお願いします！
最後まで読んでいただきありがとうございました！
すばらしいNext.jsライフをお過ごしください。
オススメ記事
検証環境
- react v17.0.2
- next v11.1.2