Azure-Samples / Azure-Samples/image-search-aisearch

Follow-up: adopt React 19 (blocked by react-grid-gallery)

Open
#100 0 comments 0 reactions 0 assignees View on GitHub
dependencies
Dominant language
Python
Stars
30
Forks
18
Avg merge
2d 6h
Merged PRs (30d)
2

Description

## Context

Dependabot PR #87 bumps `react`/`react-dom` from 18 to 19. We cannot adopt it yet because the frontend depends on [`react-grid-gallery`](https://www.npmjs.com/package/react-grid-gallery) (`^1.0.1`, last published 2024-04-29), which is used to render the search results gallery in `app/frontend/src/components/SearchResults/SearchResults.tsx`.

`react-grid-gallery@1.0.1` accesses `ReactCurrentOwner`, a React internal that was **removed in React 19**, so upgrading causes a runtime crash:

```
Cannot read properties of undefined (reading 'ReactCurrentOwner')
```

There is no React-19-compatible release of `react-grid-gallery` available, and its declared peer range (`react >=16.14.0`) does not reflect the actual incompatibility.

## Decision

Staying on **React 18** for now. Dependabot PR #87 has been closed. All other dependency bumps (Fluent UI, Vite 7, react-router-dom 7, backend/dev deps) were adopted.

## To adopt React 19 later

- [ ] Replace `react-grid-gallery` with a maintained, React-19-compatible gallery component (or a custom implementation), then
- [ ] Re-apply the React 19 bump (`react`, `react-dom`, `@types/react`, `@types/react-dom` to `^19.x`)
- [ ] Re-add `import { JSX } from "react";` in `app/frontend/src/pages/NoPage.tsx` (React 19 removed the global `JSX` namespace)

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with app/frontend/src/components/SearchResults/SearchResults.tsx to understand how react-grid-gallery is used, then reproduce the React 19 crash before evaluating a replacement or custom gallery. Check app/frontend/src/pages/NoPage.tsx and the dependency changes from Dependabot PR #87; done means the gallery works on React 19, the React dependencies are bumped, and the JSX import is restored.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.