【Build failed because of webpack errors】による'Unexpected end of JSON input' が突然起きた話

Next.jsを使用して開発している時に、突然陥ったエラーについて記録を残しておこうと思います📝

結論

ローカルのnodeのバージョン(23.1.0)と、開発中アプリケーションが期待するnodeのバージョン(20.11.0)が異なっていた。

（背景：他の言語の環境構築をしようとHomebrewを動かした時にどうやらnodeがバージョンアップされてしまったようです。絶対的にこれが原因かわからないですが、これくらいしか思い当たるものがないため..）

状況の詳細

• npm run devでは何もエラーが起こらず、正常に動作。
• nom run builにおいて下記のエラーが発生。

  client %  npm run build
  
  > client@0.1.0 build
  > next build
  
    ▲ Next.js 14.2.11
    - Environments: .env
  
     Creating an optimized production build ...
  Failed to compile.
  
  ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?
  ..
  ..
  ..
  ..
  ..... + 4 modules
  Unexpected end of JSON input
  
  ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
  ..
  ..
  ..
  .....  + 1 modules
  Unexpected end of JSON input
  
  ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
  ..
  ..
  ..
  ..... + 1 modules
  Unexpected end of JSON input
  
  ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
  ..
  ..
  ..
  .....  + 1 modules
  Unexpected end of JSON input
  
  ./node_modules/next/dist/build/webpack/loaders/next-app-loader.js?..
  ..
  ..
  ..
  .....  + 1 modules
  Unexpected end of JSON input
  
  
  > Build failed because of webpack errors
  

原因特定のために試したこと

• 自分の環境が原因かを確認する（Xや公式の情報をチェックしたり、周りの人に聞く）
• .next、node_module、package-lock.jsonの削除→再度インストール
• prisma generateしてみる
• ローカルの別フォルダにクローンして動かしてみる
• nextのバージョンがおかしくなってないか確認
• npm のバージョン確認
• npm のキャッシュ削除
• nodeのバージョン確認 ← これだった

原因特定後にやったこと

• nvmのインストール

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash
  

　

• シェル再起動 or 以下実行

  export NVM_DIR=“$([ -z “${XDG_CONFIG_HOME-}” ] && printf %s “${HOME}/.nvm” || printf %s “${XDG_CONFIG_HOME}/nvm”)“[ -s “$NVM_DIR/nvm.sh” ] && \. “$NVM_DIR/nvm.sh” # This loads nvm
  

　

• 欲しいnodeのバージョンのインストール

  nvm install 20.11.0
  

　

• インストールしたバージョンのnodeを適用（これやらなくてもinstallで勝手にセットされた感じではありましたが一応）

  nvm use 20.11.0
  

　

• nodeのバージョン確認

  node -v
  

　

• .next, node_modules, package-lock.jsonの削除
  　
• npm のキャッシュ削除（マストなのかわからないですが一応）

  npm cache clean --force
  

　

• 依存関係のインストール

  npm install
  

　

• ビルドを試す（成功）

  npm run build
  

おわりに

もし同じような状況に遭遇した方がいたときに、少しでも参考にれば幸いです。