🐈

@elastic/react-search-ui を React 19 + Next.js 15.5 で使う方法

に公開
Next.js
Next.js
React
Elasticsearch
React 19
tech

はじめに

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

npm error ERESOLVE could not resolve
npm error peer react@">= 16.8.0 < 19" 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 以降を使用します。

// package.json
{
  "dependencies": {
-   "@elastic/react-search-ui": "^1.23.1",
-   "@elastic/react-search-ui-views": "^1.23.1",
-   "@elastic/search-ui": "^1.23.1",
+   "@elastic/react-search-ui": "^1.24.2",
+   "@elastic/react-search-ui-views": "^1.24.2",
+   "@elastic/search-ui": "^1.24.2",
-   "next": "15.3.8",
+   "next": "15.5.9",
  }
}

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

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

Before（1.23.x）

type SearchContext = {
  filters: Filter[];
  setFilter: (field: string, value: FilterValue) => void;
  removeFilter: (field: string) => void;
};

<WithSearch
  mapContextToProps={({ filters, setFilter, removeFilter }: SearchContext) => ({
    filters,
    setFilter,
    removeFilter,
  })}
>
  {({ filters, setFilter, removeFilter }: SearchContext) => (
    <MyComponent filters={filters} />
  )}
</WithSearch>

After（1.24.x）

// カスタム型定義を削除し、型推論に任せる
<WithSearch
  mapContextToProps={({ filters, setFilter, removeFilter }) => ({
    filters,
    setFilter,
    removeFilter,
  })}
>
  {({ filters, setFilter, removeFilter }) => (
    <MyComponent
      filters={filters ?? []}        // undefined対策
      setFilter={setFilter!}          // non-null assertion
      removeFilter={removeFilter!}
    />
  )}
</WithSearch>

3. setFilter の型変更

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

// Before: 独自定義
setFilter: (field: string, value: FieldValue[], operator: 'all' | 'any', negate: boolean) => void

// After: search-ui の実際の型を使用
import type { FilterValue, FilterType } from '@elastic/search-ui';

setFilter: (name: string, value: FilterValue, type?: FilterType, persistent?: boolean) => void

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

// Before
setFilter(field, values, 'all', false);

// After（型アサーションを追加）
setFilter(field, values as FilterValue, '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 18 React 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

Discussion