Open3

Nuxt3のバージョンアップ

F4kerF4ker

■Nuxt3のバージョンアップ対応

個人的調査ログ
Nuxt3 ver3.13が2024年8月22日にリリースされたので、Nuxt4へのマイグレート前段階として現行のNuxt3のバージョンをアップデートしておく。

https://nuxt.com/blog/v3-13

◯現行バージョン

  • Nuxt3:3.9.3
  • Vue3:3.3.13

◯アップデート版バージョン

  • Nuxt3:3.13.2
  • Vue3:
F4kerF4ker

■事前調査

  1. Nuxt3のバージョンを3.13にアップデートしている記事を探したけどなかった..
    とりあえず公式のブログなど目を通しておく。

https://nuxt.com/blog/v3-13

https://nuxt.com/docs/getting-started/upgrade#migrating-to-nuxt-4

  1. Nuxt4へのアップデート準備も必要ではと思い検索するとリリース前にも関わらず移行ガイドを出してくれている方々を発見。。カンシャシマス
    とりあえず以下記事を一旦読み込み

https://qiita.com/hiranuma/items/6e11d0eac0daef695099

https://zenn.dev/ftd_tech_blog/articles/ftd-nuxt-2024-08-18

https://zenn.dev/shun91/articles/nuxt4-planned-changes

今回マイグレーションにあたって対応しなきゃいけなさそうな項目

  • useAysncDatadata.value及びerror.valueのデフォルト値変更
  • ディレクトリ構成変更
  • NuxtLinkの事前フェッチ(これはグローバルで試してみたい。)
  • definepageMetaの仕様(型)変更
F4kerF4ker

■何はともあれマイグレート

  1. Nuxt3のバージョンが3.12以上が必要とのことなので一旦Nuxt3を最新にしておく。
# 公式ドキュメントより
npx nuxi@latest upgrade --force
操作ログ
bash-5.2# npx nuxi@latest upgrade --force
ℹ Package manager: npm 10.2.3                                                                                                                                                                  3:39:10 PM
ℹ Current Nuxt version: 3.9.3                                                                                                                                                                  3:39:10 PM
ℹ Recreating node_modules and package-lock.json. If you encounter any issues, revert the changes and try with --no-force                                                                       3:39:10 PM
ℹ Installing latest Nuxt 3 release...                                                                                                                                                          3:40:13 PM
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated npmlog@5.0.1: This package is no longer supported.
npm WARN deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated are-we-there-yet@2.0.0: This package is no longer supported.
npm WARN deprecated @humanwhocodes/config-array@0.13.0: Use @eslint/config-array instead
npm WARN deprecated @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
npm WARN deprecated glob@8.1.0: Glob versions prior to v9 are no longer supported
npm WARN deprecated gauge@3.0.2: This package is no longer supported.
npm WARN deprecated popper.js@1.16.1: You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1
npm WARN deprecated vue@2.7.16: Vue 2 has reached EOL and is no longer actively maintained. See https://v2.vuejs.org/eol/ for more details.

added 1053 packages, and audited 1055 packages in 2m

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

5 vulnerabilities (2 moderate, 3 high)

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

 WARN  The CJS build of Vite's Node API is deprecated. See https://vitejs.dev/guide/troubleshooting.html#vite-cjs-node-api-deprecated for more details.                                         3:42:44 PM

ℹ Cleaning up generated Nuxt files and caches...                                                                                                                                               3:42:44 PM
ℹ Upgraded Nuxt version: 3.13.2                                                                                                                                                                3:42:46 PM
✔ Successfully upgraded Nuxt from 3.9.3 to 3.13.2                                                                                                                                              3:42:46 PM
ℹ Changelog: https://github.com/nuxt/nuxt/compare/v3.9.3...v3.13.2                                                                                                                             3:42:46 PM
bash-5.2#
  1. npm run devで立ち上げ
npm run dev
操作ログ

なにか聞かれたのでとりあえずYesで解答

 (repeated 13 times)
✔ Nuxt Nitro server built in 11045 ms                                                                                                                                                    nitro 3:48:36 PM
[3:48:36 PM] ℹ Nuxt now supports pinning the behavior of provider and deployment presets with a compatibility date. We recommend you specify a compatibilityDate in your nuxt.config file, or set an environment variable, such as COMPATIBILITY_DATE=2024-09-26.
ℹ Vite client warmed up in 1ms                                                                                                                                                                 3:48:36 PM

✔ Do you want to update your nuxt.config to set compatibilityDate: '2024-09-26'?
Yes
✔ Compatibility date set to 2024-09-26 in nuxt.config.ts                                                                                                                                       3:48:48 PM
ℹ nuxt.config.ts updated. Restarting Nuxt..
  1. Codemodでアップデートによる影響分をオートfix
    一旦Ctrl + Cで立ち上げ状態を抜けてCodemodeを利用して変更差異をオートfixする
操作ログ

なんかエラーっぽいのでた

bash-5.2# npx codemod@latest nuxt/4/migration-recipe
Need to install the following packages:
codemod@0.14.0
Ok to proceed? (y) y
npm WARN deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm WARN deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm WARN deprecated glob@7.2.3: Glob versions prior to v9 are no longer supported
Usage: <command> [options]

Commands:
  codemod            runs a codemod or recipe                                                                                                                                                      [default]
  codemod list       lists all the codemods & recipes in the public registry. can be used to search by name and tags                                                                   [aliases: ls, search]
  codemod learn      exports the current `git diff` in a file to before/after panels in the Codemod Studio
  codemod login      logs in through authentication in the Codemod Studio
  codemod logout     logs out
  codemod whoami     prints the user data of currently logged in user
  codemod publish    publish the codemod to Codemod Registry
  codemod unpublish  unpublish previously published codemod from Codemod Registry
  codemod init       initialize a codemod package
  codemod feedback   submit feedback to the Codemod team

Options:
      --help            Show help                                                                                                                                                                  [boolean]
      --no-telemetry    Disable telemetry                                                                                                                                                          [boolean]
  -v, -v, --version     Prints the latest version of the codemod                                                                                                                                   [boolean]
      --esm             Use to specify that you intend to use ESM-specific features in your codemods.                                                                             [boolean] [default: false]
  -j, --json            Respond with JSON                                                                                                                                         [boolean] [default: false]
      --no-cache        Disable cache for HTTP(S) requests                                                                                                                                         [boolean]
  -i, --include         Glob pattern(s) for files to include                                                                                                                                         [array]
  -e, --exclude         Glob pattern(s) for files to exclude                                         [array] [default: node_modules, .next, dist, build, *.d.ts, version control folders, gitignore entries]
  -t, --target          Input directory path                                                                                                                                                        [string]
  -s, --source          Source path of the local codemod to run                                                                                                                                     [string]
      --engine          Engine to be used with standalone codemod. Can be used to skip the prompt.                [string] [choices: "jscodeshift", "recipe", "ts-morph", "filemod", "ast-grep", "workflow"]
      --logs            Print codemod execution errors into a logfile                                                                                                             [boolean] [default: false]
      --format                                                                                                                                                                    [boolean] [default: false]
  -n, --threads         Number of worker threads                                                                                                                                       [number] [default: 4]
  -d, --dry             Perform a dry run                                                                                                                                         [boolean] [default: false]
  -m, --mode            Output mode to run the codemod in:
                        - json: Disables any stdout and only prints out JSON output if a codemod returns any.                                                  [string] [choices: "json", "plain", "silent"]
      --no-install      Disable packages installation for the codemod run if there is `deps` field declared in its configuration                                                                   [boolean]
      --readme          Prints description/readme of the codemod if available in the configuration                                                                                                 [boolean]
      --config          Prints configuration file of the codemod                                                                                                                                   [boolean]
      --cloud           Run codemod in the cloud                                                                                                                                  [boolean] [default: false]
      --no-interactive  Disable interactive mode                                                                                                                                                   [boolean]

[Error: ENOENT: no such file or directory, scandir '/root/.codemod'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'scandir',
  path: '/root/.codemod'
}
  1. Codemodで出たエラーの解決ができないので・・・
    Codemodで出たエラーの解決方法を模索したがこれといった理由もわからなかったので、大人しく手動で破壊的変更部分について対応。
  • ディレクトリ構造の変更
  • コードで利用していた、useAsyncDataの一部返却値の変更による改修
  • definePageMetaの仕様変更の対応
  • その他SPA認証に利用していたモジュールがPublicArchiveになっていたので、モジュールの切り替え及びそれに付随する改修対応