Introduction

When trying to use @elastic/react-search-ui in a project using React 19 and Next.js 15, you may encounter the following dependency error.

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

This article explains the cause of this problem and how to resolve it in detail.

Cause of the Problem

The peer dependency of @elastic/react-search-ui@1.23.1 was react@">= 16.8.0 < 19", which did not support React 19.

Solution

1. Package Upgrade

In May 2025, PR #1162 was merged and React 19 support was added. Use version 1.24.2 or later.

{}"}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. Handling Type Definition Changes

In 1.24.2, the type definitions for the WithSearch component have changed. The filters in SearchContextState is now 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 Type Change

The type of setFilter has also changed.

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

The call site also needs modification:

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

Example Files That Need Changes

In this project, the following files were modified:

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

Note: Migration to Next.js 16

We also attempted migration to Next.js 16, but there were many breaking changes that required additional handling:

  • Dependency on React 19.2
  • Renaming from middleware to proxy
  • Turbopack becomes the default
  • Forced async APIs

For stability, we recommend running on Next.js 15.5.9.

Version Compatibility Table

PackageReact 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-✅ (requires additional handling)

Summary

  1. Upgrade @elastic/react-search-ui to 1.24.2 or above
  2. Handle the WithSearch type definition changes (undefined handling)
  3. Next.js 15.5.9 is recommended (16 has many breaking changes)

Created: 2026-01-19