Zenn
🤖

Next(Docker環境)で Error [SyntaxError]: Unexpected token '<', " が発生

2025/02/15に公開
Next.js
React
Node.js
tech

問題

新しいパッケージをインストールした後にNextを起動すると以下のエラーが発生した。

⨯ Error [SyntaxError]: Unexpected token '<', " と書いてあったので、あー変なところで閉じタグつけちゃったかなと思い確認するも、対象箇所が見当たらない、、

> app@0.1.0 dev
> node --inspect=0.0.0.0:9229 node_modules/next/dist/bin/next

Debugger listening on ws://0.0.0.0:9229/d14a9b93-fad6-47a2-85a3-f1b9b544bf9b
For help, see: https://nodejs.org/en/docs/inspector
Starting inspector on 0.0.0.0:9229 failed: address already in use
   the --inspect option was detected, the Next.js router server should be inspected at port 0.
  ▲ Next.js 14.2.23
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

 ✓ Starting...
 ✓ Ready in 27.1s
 ○ Compiling /src/middleware ...
 ✓ Compiled /src/middleware in 11.9s (640 modules)
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET /_next/static/webpack/f6cdaf57d07def8c.webpack.hot-update.json 404 in 13399ms
 ✓ Compiled in 1448ms (240 modules)
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.
 GET /_next/static/webpack/f6cdaf57d07def8c.webpack.hot-update.json 404 in 204ms
 ⨯ Error [SyntaxError]: Unexpected token '<', " 

<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at parseJSONFromBytes (file:///app/node_modules/next/dist/compiled/edge-runtime/index.js:1:655888)
    at successSteps (file:///app/node_modules/next/dist/compiled/edge-runtime/index.js:1:655888)
    at eval (file:///app/node_modules/next/dist/compiled/edge-runtime/index.js:1:655888)
    at <unknown> (node:internal/process/task_queues:140:7)
    at AsyncResource.runInAsyncScope (node:async_hooks:206:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:137:8)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
 ⨯ Error [SyntaxError]: Unexpected token '<', "

原因はNodeのバージョン

今回のNextのプロジェクトでは、フロントエンドもDockerにマウントし、Docker上のNodejsサーバーで動かすようにしていた。

ただし、node-modulesはローカルでインストールし、それをDcokerにマウントする形で対応していた。

たまたまターミナルのzsh.rc周りを触っており、その辺りで謝ってNodeのバージョン管理ツール（fnm）用の環境変数を消去してしまっていた。それにより今まで合わせていたNodeのバージョンがDockerのNodeのバージョンと合わなくなってしまい、わけわからんエラーが出るようなってしまっていたようだ。

fnmの環境変数を設定し、NodeのバージョンをローカルもDockerImageも20.10にあわせる。

その後にnode-modulesと.next フォルダを消去して、再度インストールして解決！

Debugger listening on ws://0.0.0.0:9229/c91e8e75-69c3-4b5d-b2d3-75cd197b2b9d
For help, see: https://nodejs.org/en/docs/inspector
Starting inspector on 0.0.0.0:9229 failed: address already in use
   the --inspect option was detected, the Next.js router server should be inspected at port 0.
  ▲ Next.js 14.2.23
  - Local:        http://localhost:3000
  - Environments: .env.local, .env

 ✓ Starting...
   Downloading swc package @next/swc-linux-x64-gnu...
   Downloading swc package @next/swc-linux-x64-musl...
 ✓ Ready in 26.6s
 ✓ Compiled /src/middleware in 485ms
 ✓ Compiled (177 modules)

やっぱりわけわからん時にはNodeのバージョン関連のことが多い、気をつけよう

Discussion