はじめに
バージョンアップを怠るな。こまめに行おう。めんどくさくなるぞ。
今回の記事
前回バージョンアップしたプロフィールページでしたが、まだまだバージョンアップしていこうという欲が出てきたので更なるバージョンアップを決行しました。その際の記録です。
前回の記事はこちら thinking-capy.blog
記録
前提
2025/09/13時点の記録ですので時期によって違いはあります。 また、自分の環境はNode.jsとyarnを使っていてバージョンは下記になります。
Node.js：v20.19.2 yarn：v1.22.22
そもそもバージョンを上げる前に躓く
普段と違うPCで作業を行うためgit clone, yarn install --frozen-lockfileを実行。するとエラーが出る。
Error: https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.1.tgz: Request failed "404 Not Found"
yarn.lockを削除してyarn installを行い解決。しかし、yarn install中に気になる記述がコンソールに流れる.....
warning @cloudflare/next-on-pages@1.13.16: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. warning eslint@8.49.0: This version is no longer supported. Please see https://eslint.org/version-support for other options. warning eslint > @humanwhocodes/config-array@0.11.14: Use @eslint/config-array instead warning eslint > @humanwhocodes/config-array > @humanwhocodes/object-schema@2.0.3: Use @eslint/object-schema instead warning eslint > file-entry-cache > flat-cache > rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob@7.2.3: Glob versions prior to v9 are no longer supported warning eslint > file-entry-cache > flat-cache > rimraf > glob > 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.
前回上げたのはNext.jsだけだったので他のライブラリを見ていなかった。また、今は使ってない@cloudflare/next-on-pagesが残っているので今回を機に削除してしまおうと考えました。
「もう一気に上げちゃえ」と思い下記コマンドを打つ
バージョンアップ作業
yarn upgrade --latest
バージョンアップをした結果が下記になります(主要なものだけ列挙)
React.js：v19.1.1 Next.js：v15.5.3 Tailwindcss：v4.1.13 TypeScript：v5.9.2
バージョンアップ後の起動で躓く
バージョンアップが終わって起動(yarn run dev)したらエラーが出ました。
It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration.
指摘の通りに @tailwindcss/postcss をインストールしてconfigを設定していく。
postcss.config.js
const config = { plugins: { "@tailwindcss/postcss": {}, }, }; export default config;
global.cssに @import "tailwindcss"を追記
@import "tailwindcss"; html, body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
直りました。無事ページが表示されました。
バージョンアップ完了
ローカルでもVercelのPreview画面でも動作確認済みです。
これでバージョンアップも終わりこれまで使ってこなかったApp Routerをようやく試せます(今更)。
学び
バージョンアップという作業の大変さと大事さを再認識できた。フロントのバージョンアップは難しい。
「フロントエンドは壊れやすいのかな？」とか考えましたがシンプルに「自分がバージョンアップを怠っているだけ」という話しな気がします。バージョンアップを怠ってはいけない。dependabot導入とか考えようかな。
次の課題
Biomeのformatコマンドを実行したらこれまで動いてたものが動かなくなりエラーが出ます。これを直す。
これもバージョンや設定ミスが起因のような気がする。
ℹ The configuration schema version does not match the CLI version 2.2.4
1 │ {
> 2 │ "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
3 │ "organizeImports": {
4 │ "enabled": true
ℹ Expected: 2.2.4
Found: 1.6.4
ℹ Run the command biome migrate to migrate the configuration file.
✖ Found an unknown key `organizeImports`.
1 │ {
2 │ "$schema": "https://biomejs.dev/schemas/1.6.4/schema.json",
> 3 │ "organizeImports": {
│ ^^^^^^^^^^^^^^^^^
4 │ "enabled": true
5 │ },
ℹ Known keys:
- $schema
- root
- extends
- vcs
- files
- formatter
- linter
- javascript
- json
- css
- graphql
- grit
- html
- overrides
- plugins
- assist
configuration ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
✖ Biome exited because the configuration resulted in errors. Please fix them.
