Nuxt3 を VSCode Dev Containers でデバック起動しようとするとエラーになる

公開日:

Nuxt3 のプロジェクトで VSCode Dev Containers を使って開発している。

そのプロジェクトでnpm run devするも、エラーが出てブラウザが真っ白に。。。

Failed to load resource: net::ERR_CONTENT_LENGTH_MISMATCH

調べてみると、Nuxt の issue が見つかった。

Nuxt 3.7+ : net::ERR_CONTENT_LENGTH_MISMATCH with VS Code Devcontainer · Issue #181 · nuxt/cli · GitHub

Dev Containers と Nuxt で相性が悪いところがあるらしく、サーバーを起動するときに--no-forkをつけると問題を回避できるとのこと。

package.json

{
  "scripts": {
    "dev": "nuxt dev",
    "dev:no-fork": "nuxt dev --no-fork",
  }
}

npm run dev:no-fork
# nuxt dev --no-fork が実行される

無事、デバック起動できるようになった。