Open3
Nuxt3のバージョンアップ
■Nuxt3のバージョンアップ対応
個人的調査ログ
Nuxt3 ver3.13が2024年8月22日にリリースされたので、Nuxt4へのマイグレート前段階として現行のNuxt3のバージョンをアップデートしておく。
◯現行バージョン
- Nuxt3:3.9.3
- Vue3:3.3.13
◯アップデート版バージョン
- Nuxt3:3.13.2
- Vue3:
■事前調査
- Nuxt3のバージョンを3.13にアップデートしている記事を探したけどなかった..
とりあえず公式のブログなど目を通しておく。
- Nuxt4へのアップデート準備も必要ではと思い検索するとリリース前にも関わらず移行ガイドを出してくれている方々を発見。。カンシャシマス
とりあえず以下記事を一旦読み込み
今回マイグレーションにあたって対応しなきゃいけなさそうな項目
-
useAysncData
のdata.value
及びerror.value
のデフォルト値変更 - ディレクトリ構成変更
- NuxtLinkの事前フェッチ(これはグローバルで試してみたい。)
-
definepageMeta
の仕様(型)変更- https://nuxt.com/docs/api/utils/define-page-meta
- 直接
middeleware
に指定するのではなく、meta
内部にてmiddleware
を指定する必要がある - 従来
middleware
にstring
を渡していたが、Nuxt3.13〜はmiddleware
ディレクトリ配下に設置されたミドルウェアフィアル名と一致する文字列でないと型定義エラーが吐かれるようになった。
■何はともあれマイグレート
- 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#
-
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..
- 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'
}
- Codemodで出たエラーの解決ができないので・・・
Codemodで出たエラーの解決方法を模索したがこれといった理由もわからなかったので、大人しく手動で破壊的変更部分について対応。
- ディレクトリ構造の変更
- コードで利用していた、
useAsyncData
の一部返却値の変更による改修 -
definePageMeta
の仕様変更の対応 - その他SPA認証に利用していたモジュールが
PublicArchive
になっていたので、モジュールの切り替え及びそれに付随する改修対応