Azure-Samples / Azure-Samples/image-search-aisearch
Follow-up: adopt React 19 (blocked by react-grid-gallery)
- 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