Nuxt3を4にアップグレードした際に詰まったことと解決策

はじめに

このブログはNuxt3(当時は最新だった)で作っているのですが、2025年7月16日にNuxt4がリリースされているのでぼちぼちアップグレードしたので、その際に詰まったことを備忘録として残します。

upgrade手順

公式のUpgrade Guideに従ってコマンドを入力します。

$ npx nuxt upgrade

❯ Would you like to recreate node_modules and yarn.lock to fix problems with hoisted dependency versions and ensure you have the
most up-to-date dependencies?
# Yes/Noを選択できます。
# 依存関係のバージョンを引き上げるためにyarn.lockとnode_modulesを再作成するかという質問です。
# 基本的にはやった方がいいと思います。

npmバージョンが古くてエラー

コマンド実行時点で早速エラーが出ました。以下はその時のログです。

[23:10:11]  ERROR  Cannot find module '[project_path]\node_modules\nuxi\dist\chunks\main.mjs' imported from [project_path]\node_modules\nuxi\dist\shared\nuxi.u_uB65ir.mjs

指定されたパスが見つかりません。
npm notice
npm notice New minor version of npm available! 11.4.2 -> 11.6.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.6.0
npm notice To update run: npm install -g npm@11.6.0
npm notice

これは「npm notice」の方でnpmバージョンアップグレードのコマンドまで出してくれてるので解決は簡単ですね。以下のコマンドを実行して再度「npx nuxt upgrade」を実行します。

$ npm install -g npm@11.6.0

これでとりあえず実行までは進みました。(npmのバージョンが新しい人は上記エラーも出ずにスムーズに終わると思います。)

動作確認してみる

次はupgradeしてもちゃんとブログが動作するか確認します。

yarn run dev

以下のような警告が出てきて嫌な予感がしつつもブラウザを立ち上げて確認。

 WARN  Module pinia is disabled due to incompatibility issues:                                                         23:27:51
 - [nuxt] Nuxt version ^3.15.0 is required but currently using 4.1.1

Piniaでエラー

警告が出て嫌な予感がした通り、以下のようなエラーが出てきました。

"getActivePinia()" was called but there was no active Pinia. Are you trying to use a store before calling "app.use(pinia)"? See https://pinia.vuejs.org/core-concepts/outside-component-usage.html for help. This will fail in production.

このブログでは状態管理にpiniaというライブラリを使っているのですが、そこで問題が起きているみたいです。
エラーメッセージを読むと、app.use(pinia)する前にgetActivePinia()呼んでない？と書いてありますが、app.use(pinia)はNuxt3では不要だったのでNuxt4でも不要なはずでは？

調べるとredditで同じ悩みを抱えている方がいました。
外部ファイルからストアを呼び出して、その関数外で宣言しているのが悪いらしい？以下のように修正すると動くようになりました。

// 修正前
const loading = useLoading()

// 修正後
const loading = () => {
    return useLoading()
}

が、Nuxt3で出来ていたことが4でこんなやり方で直さないといけないなんてことあるか？と思い、一度Nuxt4で新規プロジェクトを立ち上げ、公式のやり方でpiniaを追加してみました。

すると上記のような書き方をしなくてもちゃんと動きました。
そういう訳なので、元プロジェクトでも一度piniaを削除して公式と同じ手順で入れなおしてみます。

$ yarn remove @pinia/nuxt
$ yarn remove pinia

$ npx nuxi@latest module add pinia
$ yarn add pinia

更に、package.jsonに以下を追加。

  // ...
  "overrides": {
    "vue": "latest"
  }
  // ...

これでようやく動きました。やはり新規プロジェクト作ってやり直しはすべてを解決する…！
 差分を見ると以下の通り、バージョンが少し変わっていました。これが原因？しかしそこまで最新と差があるわけではないと思うのですが…。

-    "@pinia/nuxt": "^0.10.1",
+    "@pinia/nuxt": "0.11.2",
     "@tailwindcss/forms": "^0.5.10",

@@ -27,8 +27,8 @@
     "jwt-decode": "^4.0.0",
-    "nuxt": "^3.15.1",
-    "pinia": "^3.0.1",
+    "nuxt": "^4.1.1",
+    "pinia": "^3.0.3",

package.jsonの追記の内容が重要なのかと思い、調べたところoverridesを使うことでパッケージの依存関係を上書き出来るみたいです。
(あるパッケージAがパッケージBのバージョン2.0を要求しているけど、脆弱性があるので1.0を使用する、みたいなことが出来るイメージかなと思います。)

vueのバージョンをlatest(最新)で上書きしているので、vueのバージョンが古かったのか？と思ったのですが、元から最新になっていました。
どういうこっちゃと思いつつoverrides項目を削って再起動したら問題なく動いてしまいました。やはりpiniaのバージョンの問題だったのかもしれません。

「Failed to fetch dynamically imported module」エラー

これであらかた動くようになったかなと思ったら、今度は管理画面に入るところでブラウザコンソールに以下のエラーが出て画面が真っ白になってしまいました。

Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: 

動的にインポートされたモジュールの読み込みの失敗ということで、何らかのモジュールのパスがおかしくなっている？
でも最初にnode_moduleは再作成してるはずだよな…と思いつつ一度削除して再インストールしてみます。

$ rm -rf node_modules
$ yarn install

これで動きました。うーん最初のコマンドで言ってる再作成って言うのは削除→再インストールじゃないのかな？不思議です。

まとめ

アップグレードの前にパッケージ管理コマンドを最新版にする、古いディレクトリを消しておくとかすれば防げたなぁみたいなことが多かったです。
とりあえずpinia以外は以下をやっておけばよさそうです。

• npmは最新版にしておく。

$ npm install -g npm@latest

• yarn使ってるならyarnも最新版にしておく。

$ npm uninstall yarn -g
$ npm install yarn -g

• node_moduleと.nuxtはアップグレード後に一度削除してyarn installし直す。