プログラミング React Suspense + lazy で隣接するコンポーネントがあるときの Hydration Mismatch 問題と回避法
React 18 以降では、Suspense と lazy を活用することでコード分割と非同期ロードを簡潔に実現できます。しかし、SSR (サーバーサイドレンダリング) と組み合わせたときに、Hydration Mismatch という厄介...
m1z0
プログラミング 
プログラミング Next.js / React でサーバーとクライアントで DOM 属性が異なり「Text content did not match」エラーになる原因と修正
Next.js を使ってアプリケーションを開発していると、Text content did not match というエラーに遭遇することがあります。これは React が サーバーサイドレンダリング (SSR) で生成した HTML と、...
プログラミング Nuxt 3 で runtimeConfig を useRuntimeConfig() で使うと @click が動かなくなるケースと原因
Nuxt 3 の useRuntimeConfig() をコンポーネント内で使うと、突如として @click やその他のイベントが発火しなくなるという報告が時々上がります。単純に “useRuntimeConfig を呼んだだけで動かなくな...
プログラミング .env ファイルが反映されない？Nuxt の環境変数ロードタイミングと prefix 問題
Nuxt 3 プロジェクトで .env ファイルを作成して環境変数を設定したのに、開発サーバーや本番デプロイで値が反映されず、undefined になってしまった経験はありませんか？特に process.env.MY_KEY や useRu...
プログラミング Nuxt 3 + Cloudflare Pages で whatwg-url パッケージ等のビルドエラー
Nuxt 3 を Cloudflare Pages にデプロイした際に発生する whatwg-url や tr46 の ENOTDIR エラーの原因と回避策を解説。バージョン固定、Nitro externals 設定、$fetch への移行など、安定デプロイのための実践的な対応方法を紹介。
プログラミング React Hydration Failed がブラウザ拡張 (extension) による script/tag の挿入で起きるケース
React SSR 環境で Hydration Failed が発生？実はブラウザ拡張が <head> や <body> にタグを挿入している可能性があります。原因特定の方法、suppressHydrationWarning の適切な使い方、クライアント専用レンダーでの回避策を解説。
プログラミング Nuxt + Docker 環境で runtimeConfig の public env がクライアント遷移後に消える問題とその対処
Docker やコンテナ環境で Nuxt アプリをデプロイすると、初回表示では正常に runtimeConfig.public の値が取得できるのに、クライアントサイドのページ遷移後に値が消える／undefined になる という問題に遭遇...
プログラミング Nuxt 3 で runtimeConfig が undefined に？環境変数・バージョン依存の読み込み失敗の対処法
Nuxt 3 を使った開発で、useRuntimeConfig() を呼び出したら undefined が返ってきてしまった……という現象に遭遇することがあります。とくに 3.13.0 などの一部バージョンや、Docker / クラウド環境...
プログラミング React の useId() を条件レンダー + ループで使うと Hydration Mismatch が起きる原因と対策
React 18 以降では、フォーム要素やアクセシビリティ対応のために useId() というフックが導入されました。これにより、サーバーサイドレンダリング (SSR) とクライアントで同一の一意な ID を生成できます。しかし、条件付きレ...
プログラミング Bashで「bad substitution」エラーが出る原因と対処法
シェルスクリプトを書いていると、次のようなエラーに遭遇することがあります。./script.sh: line 10: ${VAR//foo/bar}: bad substitution一見すると単純な文法ミスのように見えますが、これは シェ...