Skip to content

Commit

Permalink
fix(next/image): detect react@19 for fetchPriority prop (#65235)
Browse files Browse the repository at this point in the history
In a previous PR, #47302,
detection for `fetchPriority` assumed that
facebook/react#25927 would land in react@18.3.0
because that was the react@canary version at the time. However, it
didn't land in react@18.3.0 and it is expected to land in react@19.0.0
due to the breaking change.

This means that users upgrading to react@18.3.0 will see a warning.

The fix is to stop looking at the `React.version` string and instead
check for `React.use`, a feature that [will land in
react@19.0.0](https://react.dev/blog/2024/04/25/react-19#new-feature-use)
but is also available in react@canary and react@beta today.

Note: There were tests added for App Router and Pages Router in a
previous PR #47302 but they seem
to run on react@18.2.0 which is why we don't see failures.

Fixes #65161
  • Loading branch information
styfle authored May 1, 2024
1 parent 9a5b971 commit 68d5a38
Showing 1 changed file with 3 additions and 6 deletions.
9 changes: 3 additions & 6 deletions packages/next/src/client/image-component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import React, {
useMemo,
useState,
forwardRef,
version,
use,
} from 'react'
import ReactDOM from 'react-dom'
import Head from '../shared/lib/head'
Expand Down Expand Up @@ -168,11 +168,8 @@ function handleLoading(
function getDynamicProps(
fetchPriority?: string
): Record<string, string | undefined> {
const [majorStr, minorStr] = version.split('.', 2)
const major = parseInt(majorStr, 10)
const minor = parseInt(minorStr, 10)
if (major > 18 || (major === 18 && minor >= 3)) {
// In React 18.3.0 or newer, we must use camelCase
if (Boolean(use)) {
// In React 19.0.0 or newer, we must use camelCase
// prop to avoid "Warning: Invalid DOM property".
// See https://github.com/facebook/react/pull/25927
return { fetchPriority }
Expand Down

0 comments on commit 68d5a38

Please sign in to comment.