🐛 mainのCIエラーを修正 (react-hooks/set-state-in-effect + pnpm 11) - #246
Merged
Conversation
Shion1305
force-pushed
the
fix/ci-lint-and-lockfile
branch
from
May 8, 2026 09:39
10b63c0 to
346d4ad
Compare
|
Deployed on https://dev-pr-246-birbz3fm6q-an.a.run.app |
## 内容
main の CI が以下 2 つの理由で失敗していたのを根本修正する。
### 1. react-hooks/set-state-in-effect (lint失敗)
React 19 / Next.js 16 で新しく入った ESLint ルール。
useEffect 内で setState を直接呼んでいた箇所を、React 19 のイディオムに沿って書き換え。
- hooks/use-mobile.tsx, components/ui/use-mobile.tsx
- useEffect + useState を useSyncExternalStore に置き換え
- app/page.tsx, components/ui/carousel.tsx
- emblaApi 初期化時の onSelect() 直接呼び出しを emblaApi.emit("select") に変更
- components/mini-lt/SubmitForm.tsx
- editingTalk から派生する state を useEffect で同期するのをやめ、useState の初期値で表現
- components/mini-lt/ManageTalks.tsx
- 編集対象切り替え時の再マウント用に SubmitForm へ key を付与
- components/onboarding-form.tsx
- 楽観的更新の setState を fetchProfile().then() のコールバックに移動
- URL エラーパスは queueMicrotask でラップして effect 同期 setState を回避
### 2. pnpm 11 へのバージョン固定
corepack 経由で最新 pnpm 11.0.8 が降ってくると以下が起きていた。
- package.json#pnpm フィールドを読まなくなる破壊的変更
- strictDepBuilds がデフォルト true になり ERR_PNPM_IGNORED_BUILDS で fatal
ローカル環境の pnpm 10.33.0 と揃えるため packageManager フィールドで固定。
Shion1305
force-pushed
the
fix/ci-lint-and-lockfile
branch
from
May 8, 2026 09:41
346d4ad to
73634af
Compare
|
Deployed on https://dev-pr-246-birbz3fm6q-an.a.run.app |
1 similar comment
|
Deployed on https://dev-pr-246-birbz3fm6q-an.a.run.app |
Shion1305
added a commit
that referenced
this pull request
May 24, 2026
* ⬆️ pnpm 11.3.0 へアップグレード #246 で pnpm 10.33.0 に固定していた制約を解除し、pnpm 11 系へ移行。 pnpm 11 の破壊的変更 (`strictDepBuilds` のデフォルト true 化) に対応するため、 `pnpm-workspace.yaml` で許可するビルドスクリプトを明示的に列挙。 あわせて軽微な依存パッケージのバージョンを更新。 * 🐛 pnpm-workspace.yaml の CI 失敗を修正 - prettier の指摘に従いシングルクォート → ダブルクォートへ整形 - Docker ビルドで pnpm-workspace.yaml が COPY されず `strictDepBuilds` が ERR_PNPM_IGNORED_BUILDS で落ちていたため、 cloudrun/Dockerfile の deps ステージに pnpm-workspace.yaml* を追加
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
概要
Next.js 16 / React 19 アップグレード (#245) 後に main の CI が失敗しており、セキュリティ更新を含む後続のデプロイが止まっていたため、根本対応します。
修正内容
1.
react-hooks/set-state-in-effectエラー (6ファイル)React 19 で導入された新ルールに対し、
eslint-disableを使わず根本的に修正:hooks/use-mobile.tsx/components/ui/use-mobile.tsx:useEffect+setStateをuseSyncExternalStoreに書き換え（matchMedia は外部ストアの典型例）app/page.tsx/components/ui/carousel.tsx:onSelect()直接呼び出しをemblaApi.emit("select")に変更し、イベントハンドラ経由で setState させるcomponents/mini-lt/SubmitForm.tsx:editingTalkを props で受け取ってuseEffect内で setState する派生 state パターンを廃止。useStateの初期値で初期化し、親側 (ManageTalks.tsx) でkey={editingTalk?.id ?? "new"}を渡して編集対象切り替え時に再マウントさせるcomponents/onboarding-form.tsx: OAuth コールバックの楽観的 setState をfetchProfile().then()内に移動。URL パラメータ由来のエラー表示はqueueMicrotaskで effect 本体から外に出す2. Docker ビルドの
ERR_PNPM_IGNORED_BUILDScorepack 経由で最新の pnpm 11.0.8 が降ってきていたのが原因。pnpm 11 では以下の破壊的変更があり、CI で fatal になっていた:
package.json#pnpmフィールドを読まなくなったstrictDepBuildsがデフォルトtrueになり、未承認ビルドスクリプトでエラー終了するローカル環境 (pnpm 10.33.0) と揃えるため、
package.jsonに"packageManager": "pnpm@10.33.0"を追加して固定。pnpm 10 では未承認スクリプトは警告止まりで動作するため、追加の許可リスト設定は不要。3. Lint workflow の二重指定エラー
上記 (2) で
packageManagerを入れた結果、pnpm/action-setup@v4がversion: 10(Action 引数) とpnpm@10.33.0(packageManager) の二重指定でコケるようになった。version: 10のほうを削除し、packageManagerを信頼させる。動作確認
pnpm lint成功（ローカル）pnpm build成功（ローカル）