はじめに

React 19 と Next.js 15 を使用しているプロジェクトで @elastic/react-search-ui を使おうとすると、以下のような依存関係エラーに遭遇することがあります。

nnppmmeerrrroorrEpReEeSrOLrVeEaccto@u"l>d=n1o6t.8r.e0so<lv1e9"from@elastic/react-search-ui@1.23.1

この記事では、この問題の原因と解決方法を詳しく解説します。

問題の原因

@elastic/react-search-ui@1.23.1 の peer dependency が react@">= 16.8.0 < 19" となっており、React 19 をサポートしていませんでした。

解決策

1. パッケージのアップグレード

2025年5月に PR #1162 がマージされ、React 19 がサポートされました。バージョン 1.24.2 以降を使用します。

{}"}pdae""""""""cp@@@@@@nnkeeeeeeeeeanllllllxxgdaaaaaatteessssss"".ntttttt::jciiiiiisicccccc""oe//////11nsrrsrrs55"eeeeee..:aaaaaa35ccrccr..{ttcttc89--h--h""ss-ss-,,eeueeuaaiaairr"rr"cc:cc:hhhh--"--"uu^uu^ii1ii1"-."-.:v2:v2i3i4"e."e.^w1^w21s"1s".",.",2:2:34."."1^2^"1"1,.,.2234..12"",,

2. 型定義の変更への対応

1.24.2 では WithSearch コンポーネントの型定義が変更されました。SearchContextState の filters が Filter[] | undefined になっています。

Before（1.23.x）

t}<y;W/pfsrim}{)Weieeta)(}iltmhpfsr}{<tStFoSCieeMheeiveoltmfySarleantFoiCerstFrteivloac:eicerletmrhrlhxstFepcCF:tt,eirohoieTrlsn>nl(ro,t,ettf:Peneeirrstxre(o,et[lfptf]disFi=;:e=ill{lt{sd(tet:{errrsisf,=nti{grlrf,iteinemlvgrota)svel,eru=Fse>si}:elttFoFeiiirldlt;t}ee:rrV,Saelraueremc)ohvC=eo>Fnitleotxietdr);}=:>SearchContext)=>({

After（1.24.x）

<W/im}{)Wカta)(}iスhpfsr}{<tタSCieeMhムeoltmfyfsrS型antFoiCieee定rteivloltma義cerletmtForをhxstFepeivc削t,eirorleh除TrlsnstF>しo,t,e=ei、Pen{rl型rrstf=t推o,ei{e論ptlsrにsFte=任=iet{せ{lrFrる(tsie{elmr?tof,?evirelr[!Fte]}iem}lrotsve,erF!si}elttFeirlt}e)urnn,=do>enrf-einmnuoelvdle対F策aislsteerrti}o)n=>({

3. setFilter の型変更

setFilter の型も変更されています。

sisemetptBFAoFeifriflttlotetrerteer:yr::p:se独(e(自fa{n定ira義ecFmlhied-l::utiessrttのVrr実aii際lnnのugg型e,,を,使vv用Faaillluuteee::rTFFyiipleetled}rVVafalrluoueme[,]',@teyolppaees?rt:aitcFo/irsl:etae'rracTlhyl-p'uei,';p'earnsyi's,tennetg?a:teb:oobloeoalne)an=)>=>oidoid

呼び出し側も修正が必要です：

sseettBFAFeififltlotetrereer（r(型(fアfiサieーelシldョd,ン,をv追va加al）luueess,a'salFli'l,tefraVlasleu)e;,'all',false);

変更が必要なファイル例

今回のプロジェクトでは以下のファイルを修正しました：

  • src/components/page/search/Range.tsx
  • src/components/search/Facet.tsx
  • src/components/search/Facets.tsx
  • src/components/search/Filters.tsx

注意点: Next.js 16 への移行

Next.js 16 への移行も試みましたが、多くの破壊的変更があり、追加の対応が必要でした：

  • React 19.2 への依存
  • middleware から proxy へのリネーム
  • Turbopack がデフォルトに
  • 非同期 API の強制

安定性を重視する場合は Next.js 15.5.9 での運用を推奨します。

バージョン対応表

パッケージReact 18React 19
@elastic/react-search-ui 1.23.x✅❌
@elastic/react-search-ui 1.24.2+✅✅
Next.js 15.5.x✅✅
Next.js 16.x-✅（要追加対応）

まとめ

  1. @elastic/react-search-ui を 1.24.2 以上にアップグレード
  2. WithSearch の型定義変更に対応（undefined 対策）
  3. Next.js は 15.5.9 を推奨（16 は破壊的変更が多い）

参考リンク

作成日: 2026-01-19