AnchorUp 技術ブログ

AnchorUpのエンジニアが現場で得た技術知見を発信しています。

• Express 5 で起動時に落ちる・ルートが動かない時の原因と対処法【Missing parameter name / Unexpected ?】：Express 5 で起動直後に Missing parameter name や Unexpected ? が出て落ちるのは path-to-regexp v8 のルート構文変更が原因。*・?・正規表現ルートの書き換え方を解説。
• pnpm v9 でインストールが失敗する・ピア依存関係エラーが解消できない時の原因と対処法【ERR_PNPM_PEER_DEP_ISSUES】：pnpm v9 で ERR_PNPM_PEER_DEP_ISSUES が出てインストールが失敗する根本原因は strict-peer-dependencies のデフォルト変更。.npmrc・peerDependencyRules・overrides の使い分けを解説。
• Deno 2 で npm パッケージが動かない・import エラーになる時の原因と対処法【npm: specifier / node: 組み込みモジュール】：Deno 2 で npm パッケージが見つからない・import できないエラーの原因を解説。npm: プレフィックス・node: 組み込みモジュール・package.json 対応・deno.json 設定による解決法を網羅。
• Docker で M1/M2/M3 Mac ビルドのイメージが本番・CI で動かない・エラーになる：arm64/amd64 プラットフォーム不一致の解決法：Apple Silicon Mac で docker build したイメージが GitHub Actions や AWS ECS で動かない原因は arm64/amd64 のプラットフォーム不一致。--platform 指定と buildx マルチアーキテクチャビルドで完全解決。
• WSL2 で Vite の HMR が効かない・ファイル変更が反映されない時の原因と対策【hot reload / inotify / polling】：WSL2 環境で Vite の HMR が動かない根本原因は inotify の制限。プロジェクトの保存場所変更と polling 設定で確実に解決する方法を解説。
• AssumeRoleWithWebIdentity エラーの原因と対処法：GitHub Actions OIDC で AWS 認証が失敗する時【Could not assume role with OIDC / 2026年7月の sub 仕様変更】：AssumeRoleWithWebIdentity とは OIDC トークンで IAM ロールを引き受ける STS API。GitHub Actions で失敗する原因（sub/aud ミス、2026年7月以降の新リポジトリの sub 形式変更）と対処法を早見表で解説。
• Cloudflare Workers で nodejs_compat を設定しても Node.js モジュールが動かない・エラーになる時の解決策【crypto / Buffer / stream】：Cloudflare Workers で nodejs_compat フラグを有効にしても crypto や Buffer が使えない原因と対処法。nodejs_compat_v2 との違い、モジュール別のインポート方法、fs など使えないモジュールの代替策を解説。
• Vite 6 でビルドエラー・プラグインが動かない時の5つの原因と対策【v5からの移行 / sass / Environment API】：Vite 5→6移行でビルドエラー・プラグイン動作不良・Sassエラーが出る5つの原因を解説。Node.jsバージョン・Sassレガシー API・Environment API・resolve.conditionsの変更を具体的なコード例で対処。
• React Compiler とは？導入方法と最適化されない・動かない原因【babel-plugin-react-compiler / Next.js / Vite】：React Compilerはビルド時に自動メモ化するBabelプラグイン。Next.js・Viteへの導入、React 18/17でのtarget・react-compiler-runtime設定、最適化されない原因の診断を解説。
• NextAuth v5（Auth.js）とは？v4移行で動かない原因と対策【withAuth/CredentialsSignin/AUTH_SECRET】：NextAuth v5（Auth.js）はv4と別物。withAuth・getServerSessionは廃止されauth()に統一。CredentialsSigninの直し方とAUTH_SECRET移行を実例で解説。
• Socket.io が Next.js App Router で動かない・接続できない時の解決法【WebSocket / カスタムサーバー】：Next.js App RouterでSocket.ioが接続できない原因と3つの解決策を解説。Route HandlerはWebSocket非対応のため、カスタムサーバー分離構成が必要です。コード例付き。
• Docker で npm install が毎回実行される・キャッシュが効かない時の5つの原因と対策【マルチステージビルド / BuildKit】：Dockerビルドで npm install が毎回走る・キャッシュがヒットしない時の5つの原因を解説。COPY順序ミス・node_modules除外漏れ・BuildKit cache mount・ARG起因のキャッシュ破壊の対策をコード例付きで説明。
• tRPC v11 で型エラー・動かない時の対処法：v10からの移行で詰まる5つの破壊的変更【React Query v5 / createCallerFactory】：tRPC v10 から v11 にアップグレードしたら型エラーや useQuery が動かなくなった原因と対処法。React Query v5 対応・createCallerFactory・httpBatchStreamLink への移行手順を解説。
• Storybook 8 でビルドエラー・コンポーネントが表示されない時の5つの原因と対策【React / Vite / v7移行】：Storybook 7→8移行でビルドエラー・コンポーネント表示崩れ・テスト失敗が起きる5つの原因と対処法。@storybook/test移行・Viteビルダー設定まで解説。
• Sass @import が Vite で deprecated エラー・警告が消えない時の原因と移行手順【Dart Sass 2.0 対応】：Vite ビルドで Sass @import の deprecation 警告が大量に出る・ビルドエラーになる原因と対処法。@use / @forward への移行手順と vite.config.ts の設定を解説。
• Vercel AI SDK で StreamingTextResponse・OpenAIStream が動かない時の原因と対処法：新 API への移行ガイド【ai パッケージ】：Vercel AI SDK (ai) で StreamingTextResponse is not exported・OpenAIStream 廃止エラーが出る原因と対処法。streamText + toDataStreamResponse() への移行コード例を解説。
• Next.js 15 で params・cookies() が動かない・エラーになる：Dynamic APIs 非同期化への移行ガイド：Next.js 15 で params や cookies() を使うと「should be awaited」エラーが出る原因と対処法を解説。Page・Layout・Route Handler ごとの正しい async/await の書き方と自動移行 codemod をコード例付きで紹介。
• React Router v7 で動かない・型エラーになる時の対処法：v6 / Remix からの移行で詰まる5つの原因：React Router v7 へ移行したら useLoaderData の型が any になる・Route モジュールが見つからない・clientLoader エラーが出るなどのトラブルを原因別に解説。v6・Remix v2 からの移行手順と対処法をコード付きで紹介。
• PM2 で ESM（import 文）が動かない・SyntaxError が出る時の原因と対策【ecosystem.config.cjs / Node.js ESM】：PM2でtype: "module"やimport文を使うとSyntaxErrorやERR_REQUIRE_ESMが出る原因を解説。ecosystem.config.cjsへのリネーム、PM2 v5への更新、fork モードへの変更など状況別の対処法をコード付きで紹介。
• Vitest で vi.mock が動かない・モックが差し替わらない時の原因と対策【ESM hoisting / factory関数 / スパイ】：Vitest の vi.mock でモックが差し替わらない・undefined になる原因を5つ解説。ESM hoistingの罠、factory関数内の変数参照エラー、デフォルトエクスポートのモック方法、vi.spyOnとの使い分けを実例付きで解説。
• Hono RPC（hc クライアント）で型が効かない・型エラーになる時の原因と対処法【AppType / .route() チェーン / zValidator】：Hono の hc クライアントで型推論が効かない・レスポンス型が unknown になる原因と対処法。AppType の正しいエクスポート・ルートチェーン・.route() の使い方・zValidator の設定をコード付きで解説。
• Next.js App Router で fetch キャッシュが効かない・毎回リクエストが飛ぶ時の原因と対策【v14 / v15 / revalidate / unstable_cache】：Next.js App Router で fetch のキャッシュが機能しない・毎回APIリクエストが発生する時の原因と対策。v14→v15のデフォルト変更、Authorizationヘッダー除外、unstable_cacheの使い方をコード付きで解説。
• Node.js で TypeScript を直接実行できない・エラーになる時の原因と対処法【--experimental-strip-types / enum・デコレータ非対応】：Node.js 22.6+ の --experimental-strip-types でTypeScriptを直接実行しようとしたらSyntaxErrorが出る時の原因と対処法。enum・デコレータ・パラメータプロパティが動かない理由と回避策をコード付きで解説。
• MSW v2 で動かない・テストが落ちる時の移行手順と対策【rest→http / ctx.json→HttpResponse】：MSWをv1からv2にアップデートしたらテストが全滅した時の原因と対処法。rest→http、res(ctx.json)→HttpResponse.json、リクエストボディ取得の変更など破壊的変更を網羅してコード付きで解説。
• AbortSignal.timeout() の使い方｜fetch にタイムアウトを設定する方法とタイムアウトしない原因【Node.js / ブラウザ】：fetch にタイムアウト設定はなく signal: AbortSignal.timeout(ms) を渡すのが正解。対応バージョン、TimeoutError と AbortError の違い、AbortSignal.any 併用を解説。
• ERR_REQUIRE_ESM の原因と対策｜Node.js 22.12+/20.19+で直る？バージョン別早見表【Jest / TypeScript】：ERR_REQUIRE_ESMはCJSからESMをrequireした時のエラー。Node.js 20.19+/22.12+なら大半は解消。top-level await・Jest・TypeScriptで直らない場合の対策も実例で解説。
• Bun で npm パッケージが動かない・インストールエラーになる時の5つの原因と対策【node-gyp / ネイティブモジュール / Node.js互換性】：Bunに移行したらnpmパッケージが動かない問題を解説。node-gypビルド失敗・ネイティブアドオン未対応・CJS/ESM混在・未実装APIまで、原因と対処法を網羅。
• React 19 の use() でデータ取得が動かない・Suspense エラーになる時の5つの原因と対策【Promise / Context / Next.js App Router】：React 19 の use() フックでデータ取得が動かない・無限ループになる問題を解説。Promise の再生成・Suspense 境界の設置・ErrorBoundary の組み合わせまで網羅。
• ESLint + Prettier から Biome に移行したら動かない・効かない時の5つの原因と対策【VS Code / CI対応】：BiomeへのESLint/Prettier移行でよくある「ルールが効かない」「自動フォーマットされない」「CIで動かない」問題の原因と解決策を実例付きで解説。型チェック非対応への対処も紹介。
• Next.js 15 Server Actions が動かない・エラーになる時の5つの原因と対処法【App Router / React 19対応】：Next.js 15 の Server Actions で "use server" エラー、フォーム送信失敗、型エラーが出る原因を解説。React 19 の useActionState 移行・シリアライズエラー・redirect の落とし穴まで網羅。
• lint-staged とは？husky v9 での設定方法と動かない時の原因と対策【npx lint-staged / pre-commit】：lint-staged はステージ済みファイルだけに ESLint/Prettier を実行するツール。husky v9 での設定手順と、動かない・実行されない時の原因と対処を解説。
• Drizzle ORM でマイグレーションが動かない・スキーマが反映されない時の5つの原因と対策【Neon / Vercel Postgres対応】：Drizzle ORMのマイグレーションで詰まるポイントを解説。push vs migrate の使い分け・接続文字列の誤り・SSL設定・Relational APIの初期化ミスなど5つの原因と対処法。
• shadcn/ui が Next.js App Router で動かない・"use client" エラーになる時の5つの原因と対策：shadcn/ui + Next.js App Router で useState / useContext エラーが出る5つの原因を解説。Provider配置・イベントハンドラ・Slot境界の問題と対策をコード付きで紹介。
• Supabase Auth + Next.js App Router でセッションが取れない・ログインが動かない時の5つの原因と対策【@supabase/ssr / middleware】：Supabase Auth と Next.js App Router を組み合わせてセッションが undefined・ログイン後もリダイレクトされないなど認証が動かない5つの原因をコード付きで解説。@supabase/ssr 移行・middleware 設定・Cookie の扱いを整理。
• Prisma + Vercel で "PrismaClient is not a constructor" / "PrismaClientInitializationError" が出て動かない時の5つの原因と対策【Serverless / Edge Runtime】：Prisma + Vercel 環境でローカルは動くのに本番で PrismaClient エラーが出る5つの原因を解説。prisma generate 忘れ・Edge Runtime 非対応・コネクション枯渇・環境変数未設定・モノレポのパス問題をコード付きで解決。
• Stripe Webhook 署名検証が失敗する・`No signatures found` エラーが解決しない時の原因と対処法【Next.js / Express / Node.js】：Stripe Webhook で "No signatures found matching the expected signature for payload" や署名検証エラーが出る原因を解説。raw body 取得・Webhook シークレットの混在・App Router の落とし穴まで対処法をコード付きで紹介。
• Node.js ESM で __dirname / __filename が "ReferenceError: __dirname is not defined" になる原因と解決法【type: module 移行】：package.json に "type": "module" を追加した途端に __dirname が ReferenceError になる問題の原因と、import.meta.url・fileURLToPath を使った解決策をコード例付きで解説。
• TanStack Query v5（React Query v5）で型エラー・動かない時の対処法：v4からの破壊的変更5選：React Query v5にアップグレードしたら型エラーや動作不具合が続出。onSuccess削除・useQuery引数変更・isPending移行・gcTime改名など5つの破壊的変更と対処法を解説。
• Turborepo キャッシュが効かない・ヒットしない時に確認する5つの原因と対策【outputs / env / remote cache】：Turborepo でビルドキャッシュが効かない・FULL TURBO にならない時の5つの原因を解説。outputs設定漏れ・env指定ミス・TURBO_TOKEN未設定などリモートキャッシュ問題まで対処法をコード付きで紹介。
• AWS S3 + CloudFront でキャッシュが更新されない・X-Cache: Miss from cloudfront が続く時の原因と対処法【Cache-Control / Invalidation】：X-Cache: Miss from cloudfront はエッジにキャッシュが無くS3から取得した印。Missが続く原因（TTL0・no-cache・キャッシュキー）と、S3更新が反映されない時の対処を解説。
• Next.js App Router で "Hydration failed" エラーが解決できない・Text content does not match が出る時の5つの原因と対策：Next.js App Router で "Hydration failed because the initial UI does not match" エラーが出る原因と対策。日付・乱数・localStorage・ブラウザ拡張機能・条件レンダリングパターンごとに解決策を解説。
• Zod + React Hook Form でバリデーションが効かない・エラーメッセージが出ない時の5つの原因と対策【zodResolver】：zodResolver を使っても React Hook Form のバリデーションが動かない・エラーが表示されない原因を5つ解説。インポートミス・mode設定・型不一致・ネスト・superRefineのフィールド紐付けまで対処法をコード付きで紹介。
• Cloudflare Workers で env（環境変数）が undefined になる・読めない時の原因と対策【process.env / .dev.vars / .env / wrangler secret put】：Cloudflare Workers の env は handler 第2引数か cloudflare:workers から取得する。process.env・.env が読めない条件、.dev.vars との優先順位、secret put、Pages の設定場所まで解説。
• pnpm で "Cannot find module" が出る・npm では動くのに pnpm で動かない時の原因と対策【phantom dependency（幽霊依存）とは何か / .npmrc】：phantom dependency（幽霊依存）とは、package.jsonに書いていないのに動いてしまう依存関係のこと。npm/yarnでは動くのにpnpmへ移行すると"Cannot find module"エラーになる仕組みと正しい解決策を解説します。
• Playwright テストが CI だけ落ちる・ローカルで通るのに GitHub Actions で失敗する5つの原因と対策：ローカルでは通るPlaywrightテストがGitHub Actionsで落ちる原因を5つ解説。ブラウザ未インストール・タイムアウト・スナップショット不一致・環境変数なし・サーバー未起動の対処法をコード例付きで紹介。
• Tailwind CSS v4 でクラスが効かない・スタイルが当たらない時の5つの原因と対策【v3からの移行】：Tailwind CSS v4 移行後にクラスが効かない・スタイルが当たらない問題を5つの原因別に解説。@importの書き方変更、PostCSS設定、@theme移行、content廃止、クラス名変更など移行時のハマりどころを網羅。
• NEXT_PUBLIC_ とは？Vercel 環境変数の設定方法と undefined・反映されない6つの原因【APP_URL / API_URL】：NEXT_PUBLIC_ はビルド時にJSへ埋め込まれブラウザに公開される接頭辞。Vercel での環境変数の設定方法と、undefined・反映されない6つの原因、APP_URL/API_URL の正しい設定を解説。
• Vite で process is not defined になる原因と直し方【Uncaught ReferenceError・React/CRA移行】：ブラウザに process は無いのが原因。自前コードは import.meta.env.VITE_xxx に置換、ライブラリ由来は define で対処。dev/build の挙動差とCRA移行も解説。
• Docker Compose + Node.js でホットリロードが効かない・ファイル変更が反映されない時の原因と対策：Docker Compose環境でNode.jsのホットリロードが動かない・node_modulesが消える問題の原因と解決策を解説。volumes設定・inotify・polling・named volumeなど5つのよくある原因を網羅。
• React useEffect が2回実行される・APIが2回呼ばれる原因と対策【React 18 StrictMode】：React 18でuseEffectが2回実行されAPIが重複呼び出しされる原因はStrictModeの仕様変更。開発環境での症状・本番との違い・AbortControllerによる正しい対処法を解説。
• macOS iCloud Desktop Sync で開発環境が壊れる・dev server が固まる原因と対策【.nosync / metadata.nosync とは何かも解説・全言語共通】：.nosync（metadata.nosync 等）は「iCloud に同期しない」印。~/Desktop や ~/Documents で開発すると dev server が固まる・git が壊れる原因と対策、.nosync が消える落とし穴を解説。
• Vitest で @/ パスエイリアスが解決できない・Cannot find module エラーの対処法【Vue / React / TypeScript】：Vitestで「Cannot find module '@/...'」エラーが出る原因と対策。vitest.config.tsのalias設定ミス、ESModule対応、Jest版moduleNameMapperまで網羅。
• package.json exports/imports とは？書き方と import できない時の対策【ERR_PACKAGE_PATH_NOT_EXPORTED】：package.json の exports は公開エントリーポイントを定義するフィールド。条件付きexports・types・imports(#)の書き方と ERR_PACKAGE_PATH_NOT_EXPORTED の対処を解説。
• ESLint v9 eslint.config.js の書き方と動かない原因【flat config・fixupPluginRules・v10対応】：ESLint v9以降は eslint.config.js で設定する。defineConfig の書き方、ESLINT_USE_FLAT_CONFIG、fixupPluginRules、prettier/flat、v10変更点を解説。
• GitHub Actions キャッシュが効かない・ヒットしない時に確認する6つの原因と対策【npm/pnpm/Docker】：GitHub Actionsのactions/cacheがCache Missになり効かない問題の原因と対策。npm・pnpm・Dockerでハマる6パターンをコード例付きで解説。
• TypeScript で型アノテーションをつけると型推論が消える・キー補完が効かない時に satisfies で解決する【as・as const との違い】：TypeScriptのRecord型で型アノテーションを付けると型推論が消えキー補完が効かなくなる問題。satisfies演算子で型チェックと推論を両立する方法・as/as constとの使い分けを実例付きで解説。
• Next.js OG画像が真っ白・表示されない時の3つの原因と対策【Vercel Edge / satori】：Next.jsのImageResponse（satori）で動的OG画像を生成したら本番で真っ白・表示されない・500エラー・0バイトになる問題の原因と対策を解説。