archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(next/image): detect react@19 for fetchPriority prop (#65235)

Browse source 
In a previous PR, https://github.com/vercel/next.js/pull/47302,
detection for `fetchPriority` assumed that
https://github.com/facebook/react/pull/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 https://github.com/vercel/next.js/pull/47302 but they seem
to run on react@18.2.0 which is why we don't see failures.

Fixes https://github.com/vercel/next.js/issues/65161
This commit is contained in:
Steven 2024-05-01 15:17:54 -04:00 committed by GitHub
parent 9a5b971fc6
commit 68d5a3892b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 3 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/next/src/client/image-component.tsx
View file

@ -8,7 +8,7 @@ import React, {
useMemo,
useState,
forwardRef,
version,
use,
} from 'react'
import ReactDOM from 'react-dom'
import Head from '../shared/lib/head'
@ -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 }