Nuxt4のインストールで失敗したときの対処法(Windows / VSCode)

現場で最速でつかえるTypeScript入門

Nuxt 4のプロジェクトをnpm create nuxt@latestで作成しようとしたところ、npm installの段階でいきなり「npm error Cannot read properties of null (reading 'edgesOut')」のエラーが出て失敗。備忘録のために、原因と対処法をまとめておきます。

環境情報

  • OS:Windows11
  • エディタ:VS Code(PowerShellターミナル使用)
  • Node.js:v22.17.0
  • npm:10.9.2(対処前)

実際の作業

1.Nuxtプロジェクトを作成

> npm create nuxt@latest demo_nuxt_ts -- -t v4    ←Nuxtプロジェクトの作成を試みる

こちらのコマンドでNuxtプロジェクトを作成しようとしました。

2.Q&Aを進めるもエラー発生

◓  Installing dependencies with npm...│
■  Error: `npm install` failed.
│
│  npm error Cannot read properties of null (reading 'edgesOut')

テンプレート選択・パッケージマネージャー選択・Git初期化の確認まで進んだ後、依存関係のインストール中に以下のエラーが出て失敗。

3.原因を調査したところ、npm自体の既知の不具合であることが判明

npmの内部で依存関係の解決処理を行うarboristというモジュールのバグで、特定のライブラリやNuxt固有の問題ではなく、npm公式のGitHubリポジトリでも同様の報告が複数上がっています。直近でも2026年7月に同じエラーが報告されており、npm開発チーム側でも根本原因を特定しきれていない状態でした。

4.npmのキャッシュをクリアし、再挑戦

> Remove-Item -Recurse -Force demo_nuxt_ts    ←失敗したフォルダを削除
> npm cache clean --force    ←npmのキャッシュをクリア

まず、フォルダを削除してnpmのキャッシュをクリアし、再試行しましたが、同じエラーが再発。

5.npmのバージョンを確認

> npm -v    ←npmのバージョンを確認
10.9.2

次に、npm自体のバージョンを確認したところ、10.9.2とちょっとふるかったことが判明

6.npmを最新版に更新

> npm install -g npm@latest    ←npmを最新版に更新しようとする
npm error engine Not compatible with your version of node/npm: npm@12.0.1
npm error notsup Required: {"node":"^22.22.2 || ^24.15.0 || >=26.0.0"}

npmを最新版に更新しようとしましたが、最新版(12.0.1)はNode.js 22.22.2以上を要求しており、今回の環境(Node.js v22.17.0)とはバージョンが合わず、更新に失敗。

そこで、最新版ではなく、1つ前のメジャーバージョンであるnpm@11を指定してインストール

> npm install -g npm@11    ←npmをバージョン11系に更新

added 1 package in 7s

15 packages are looking for funding
  run `npm fund` for details

PS C:\projects> npm -v
11.18.0            ←npmのバージョンが11系になったことを確認

ひとまず成功。バージョンが11.18.0に上がったことを確認。いったんこれで。

7.再度、プロジェクト作成コマンドを実行

> npm create nuxt@latest demo_nuxt_ts -- -t v4    ←再度プロジェクト作成を試みる

npm warn "v4" is being parsed as a normal command line argument.
npm warn Unknown cli config "--t". This will stop working in the next major version of npm.

> npx
> create-nuxt demo_nuxt_ts v4


        .d$b.
       i$$A$$L  .d$b
     .$$F` `$$L.$$A$$.
    j$$'    `4$$:` `$$.
   j$$'     .4$:    `$$.
  j$$`     .$$:      `4$L
 :$$:____.d$$:  _____.:$$:
 `4$$$$$$$$P` .i$$$$$$$$P`

┌  Welcome to Nuxt!
│
◇  Templates loaded
│
◇  Which template would you like to use?
│  minimal – Minimal starter with a single app.vue.
│
◇  Creating project in demo_nuxt_ts
│
◇  Downloaded minimal template
│
◇  Which package manager would you like to use?
│  npm
│
◇  Initialize git repository?
│  Yes
│
◇  Dependencies installed
│
◒  Initializing git repositoryInitialized empty Git repository in C:/projects/demo_nuxt_ts/.git/
◇  Git repository initialized
│
◇  Would you like to browse and install modules?
│  No
│
└  ✨ Nuxt project has been created with the minimal template.

╭── 👉 Next steps ─────╮
│                      │
│   › cd demo_nuxt_ts  │
│   › npm run dev      │
│                      │
╰──────────────────────╯

再度、プロジェクト作成コマンドを実行したところ、正常にインストールが完了!

ただ、前回は出ていなかった↓以下の警告が新たに出ました。

npm warn "v4" is being parsed as a normal command line argument.
npm warn Unknown cli config "--t". This will stop working in the next major version of npm.

これは実害はなく(実際にNuxt 4のminimalテンプレートで正常に作成できています)、コマンドの書き方(-- -t v4の解釈のされ方)がnpmのバージョンによって変わってきている、という将来的な非推奨警告のようです。

8.プロジェクトを実行

› cd demo_nuxt_ts     ←移動して
› npm run dev     ←実行

こちらを実行して、http://localhost:3000/にアクセス。

無事に表示されました!

npm run dev とは?

npm run devは、package.jsonscriptsに登録されたdev(実体はnuxt dev)を代わりに実行しているだけのショートカットです。そのため、以下を直接実行しても、全く同じ結果になります。

npm run devという書き方が使われる理由は、コマンドを短く統一できる利便性のためです。将来オプションを追加したくなった場合も、package.json側を1箇所書き換えるだけで、チーム全員に同じ設定が反映されます。

原因

今回は、npm自体のバージョンを11系に上げることで解決しました。原因は、古いnpm(10.9.2)に存在する既知の不具合で、Nuxt側の問題ではありませんでした。

さいごに

edgesOutというエラーは、一見するとNuxtやプロジェクト固有の問題に見えますが、実際はnpm自体のバグでした。同じエラーに遭遇した方は、まずnpmのバージョンを確認してみることをおすすめします。

参考リンク

  • npm/cli #9787 — 同じエラーが2026年7月に報告されているIssue
  • npm/cli #8261 — 同様のエラー報告(2025年4月)
  • n8n-io/n8n #10817 — Nuxt/npmとは別のプロジェクトでも同じエラーが報告されている

エラーログ

\AppData\Local\npm-cache_logs\2026-07-25T01_37_05_113Z-debug-0.l

クラッシュ直前に解決しようとしていたパッケージ

エラーの直前(433行目)に処理されていたのはpostcss@^8.5.17で、その前にはvite@*のpeer依存関係を解決しようとしていました。

426 silly fetch manifest vite@*
430 silly fetch manifest postcss@^8.5.17
434 verbose stack TypeError: Cannot read properties of null (reading 'edgesOut')

注目すべき点:viteが2つの異なる文脈で要求されている

ログを遡ると、viteパッケージが、少なくとも2つの異なるバージョン範囲・文脈で要求されていることが分かります。

59  silly fetch manifest vite@^7.3.0 || ^8.0.0     ←Nuxt本体からの直接要求
426 silly fetch manifest vite@*                     ←@vitejs/devtools-vite等からのpeer依存要求

さらに、@vitejs/devtools@vitejs/devtools-oxc@vitejs/devtools-rolldown@vitejs/devtools-viteという4つの関連パッケージが立て続けに解決されており、これらが持つviteへのpeer依存(vite@*)と、Nuxt本体が持つviteへの直接依存(vite@^7.3.0 || ^8.0.0)が絡み合うタイミングで、クラッシュが発生しています。

エラー発生箇所(スタックトレース)

at #loadPeerSet (arborist/lib/arborist/build-ideal-tree.js:1289:38)

loadPeerSetは、その名の通りpeer依存関係(あるパッケージが「これも一緒に入れてね」と要求する依存関係)を解決する処理です。今回のケースでは、viteという同じパッケージが複数の経路から異なる形で要求され、npm内部の依存関係グラフのノードがnullのまま参照されてしまった可能性が高いと考えられます。