技術ブログ
AnchorUpのエンジニアが、現場で得た知見を発信します。
Node.js ESM で __dirname / __filename が "ReferenceError: __dirname is not defined" になる原因と解決法【type: module 移行】
package.json に "type": "module" を追加した途端に __dirname が ReferenceError になる問題の原因と、import.meta.url・fileURLToPath を使った解決策をコード例付きで解説。
Turborepo キャッシュが効かない・ヒットしない時に確認する5つの原因と対策【outputs / env / remote cache】
Turborepo でビルドキャッシュが効かない・FULL TURBO にならない時の5つの原因を解説。outputs設定漏れ・env指定ミス・TURBO_TOKEN未設定などリモートキャッシュ問題まで対処法をコード付きで紹介。
TanStack Query v5（React Query v5）で型エラー・動かない時の対処法：v4からの破壊的変更5選
React Query v5にアップグレードしたら型エラーや動作不具合が続出。onSuccess削除・useQuery引数変更・isPending移行・gcTime改名など5つの破壊的変更と対処法を解説。
AWS S3 + CloudFront でキャッシュが更新されない・古いファイルが表示される時の原因と対処法【Cache-Control / Invalidation】
S3にファイルをアップロードしても古いコンテンツが表示され続ける問題を解説。CloudFront TTL・Cache-Controlヘッダー・Invalidationの落とし穴とCI/CDでの正しい設定方法を網羅。
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 で環境変数が undefined になる・読めない時の原因と対策【wrangler.toml / .dev.vars / Pages】
Cloudflare Workers / Pages で env.XXX が undefined になる原因と対処法。process.env が使えない理由、wrangler.toml のバインディング設定、ローカル開発時の .dev.vars の書き方、シークレットの登録方法を解説。
pnpm で "Cannot find module" が出る・npm では動くのに pnpm で動かない時の原因と対策【phantom dependency / .npmrc】
npm/yarnでは動くのにpnpmへ移行したら "Cannot find module" エラーが出る原因はphantom dependency（幽霊依存）です。仕組みと正しい解決策を解説します。
Playwright テストが CI だけ落ちる・ローカルで通るのに GitHub Actions で失敗する5つの原因と対策
ローカルでは通るPlaywrightテストがGitHub Actionsで落ちる原因を5つ解説。ブラウザ未インストール・タイムアウト・スナップショット不一致・環境変数なし・サーバー未起動の対処法をコード例付きで紹介。
Tailwind CSS v4 でクラスが効かない・スタイルが当たらない時の5つの原因と対策【v3からの移行】
Tailwind CSS v4 移行後にクラスが効かない・スタイルが当たらない問題を5つの原因別に解説。@importの書き方変更、PostCSS設定、@theme移行、content廃止、クラス名変更など移行時のハマりどころを網羅。
Vercel で環境変数が undefined になる・本番に反映されない時の5つの原因と対策【NEXT_PUBLIC_ / Redeploy / スコープ】
Vercel にデプロイしたNext.jsで環境変数がundefinedになる原因を5つに分類して解説。NEXT_PUBLIC_プレフィックス、リデプロイ忘れ、スコープ設定ミスなど実務でよくハマるパターンと対処法。
Vite で "process is not defined" エラーが出る・CRA からの移行でハマる5つの原因と対策
Create React App から Vite に移行した際に発生する "process is not defined" エラーの原因と解決策を解説。{"BASE_URL":"/","MODE":"production","DEV":false,"PROD":true,"SSR":false} への書き換えからサードパーティライブラリ対応まで。
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 が固まる原因と対策【Node/Python/Rust/Go/Xcode 全言語共通】
Mac の ~/Desktop や ~/Documents で開発していると dev server が固まる、git が壊れる、venv が死ぬ。原因は iCloud Desktop & Documents Sync と "Mac のストレージを最適化" による dataless 化。言語別の症状・brctl での確認方法・3段階の対策を解説。
Vitest で @/ パスエイリアスが解決できない・Cannot find module エラーの対処法【Vue / React / TypeScript】
Vitestで「Cannot find module '@/...'」エラーが出る原因と対策。vitest.config.tsのalias設定ミス、ESModule対応、Jest版moduleNameMapperまで網羅。
package.json exports で import できない・動かない時の原因と対策【ERR_PACKAGE_PATH_NOT_EXPORTED】
package.jsonにexportsフィールドを追加したらimportがERR_PACKAGE_PATH_NOT_EXPORTEDで動かない問題の原因と対策。TypeScript型定義消失・ESM/CJS・monorepoでのハマりどころを解説。
ESLint v9 で動かない・エラーになる時の対処法：flat config 移行で詰まる5つの原因
ESLint v9のflat config（eslint.config.js）移行でエラーが出る・ルールが効かない・動かない問題の原因と対策をTypeScript・React・Vite実例付きで解説。
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バイトになる問題の原因と対策を解説。