Bump React types to 19 rc

package.json

@@ -107,8 +107,8 @@
     "@types/jest": "29.5.5",
     "@types/node": "20.12.3",
     "@types/node-fetch": "2.6.1",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "@types/relay-runtime": "14.1.13",
     "@types/string-hash": "1.1.1",
     "@types/trusted-types": "2.0.3",
@@ -251,8 +251,8 @@
     "@babel/parser": "7.22.5",
     "@babel/types": "7.22.5",
     "@babel/traverse": "7.22.5",
-    "@types/react": "18.3.3",
-    "@types/react-dom": "18.3.0",
+    "@types/react": "npm:types-react@19.0.0-rc.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0-rc.0",
     "react": "19.0.0-rc-f994737d14-20240522",
     "react-dom": "19.0.0-rc-f994737d14-20240522",
     "react-is": "19.0.0-rc-f994737d14-20240522",

packages/next/src/client/components/app-router-announcer.tsx

@@ -42,7 +42,7 @@ export function AppRouterAnnouncer({ tree }: { tree: FlightRouterState }) {
   }, [])
 
   const [routeAnnouncement, setRouteAnnouncement] = useState('')
-  const previousTitle = useRef<string | undefined>()
+  const previousTitle = useRef<string | undefined>(undefined)
 
   useEffect(() => {
     let currentTitle = ''

packages/next/src/client/components/error-boundary.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import { usePathname } from './navigation'
 import { isNextRouterError } from './is-next-router-error'
 import { staticGenerationAsyncStorage } from './static-generation-async-storage.external'

packages/next/src/client/components/layout-router.tsx

@@ -18,6 +18,7 @@ import React, {
   startTransition,
   Suspense,
   useDeferredValue,
+  type JSX,
 } from 'react'
 import ReactDOM from 'react-dom'
 import {

packages/next/src/client/components/react-dev-overlay/internal/helpers/use-websocket.ts

@@ -4,7 +4,7 @@ import { getSocketUrl } from './get-socket-url'
 import type { TurbopackMsgToBrowser } from '../../../../../server/dev/hot-reloader-types'
 
 export function useWebsocket(assetPrefix: string) {
-  const webSocketRef = useRef<WebSocket>()
+  const webSocketRef = useRef<WebSocket>(undefined)
 
   useEffect(() => {
     if (webSocketRef.current) {

packages/next/src/client/components/react-dev-overlay/shared.ts

@@ -94,7 +94,7 @@ export const INITIAL_OVERLAY_STATE: OverlayState = {
 }
 
 export function useErrorOverlayReducer() {
-  return useReducer<React.Reducer<OverlayState, BusEvent>>((_state, action) => {
+  return useReducer((_state: OverlayState, action: BusEvent): OverlayState => {
     switch (action.type) {
       case ACTION_BUILD_OK: {
         return { ..._state, buildError: null }

packages/next/src/client/components/render-from-template-context.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useContext } from 'react'
+import React, { useContext, type JSX } from 'react'
 import { TemplateContext } from '../../shared/lib/app-router-context.shared-runtime'
 
 export default function RenderFromTemplateContext(): JSX.Element {

packages/next/src/client/components/use-reducer-with-devtools.ts

@@ -103,8 +103,8 @@ function useReducerWithReduxDevtoolsImpl(
     throw new Error('Invariant: Missing ActionQueueContext')
   }
 
-  const devtoolsConnectionRef = useRef<ReduxDevToolsInstance>()
-  const enabledRef = useRef<boolean>()
+  const devtoolsConnectionRef = useRef<ReduxDevToolsInstance>(undefined)
+  const enabledRef = useRef<boolean>(undefined)
 
   useEffect(() => {
     if (devtoolsConnectionRef.current || enabledRef.current === false) {

packages/next/src/client/head-manager.ts

@@ -1,5 +1,7 @@
 import { setAttributesFromProps } from './set-attributes-from-props'
 
+import type { JSX } from 'react'
+
 function reactElementToDOM({ type, props }: JSX.Element): HTMLElement {
   const el: HTMLElement = document.createElement(type)
   setAttributesFromProps(el, props)

packages/next/src/client/index.tsx

@@ -8,7 +8,7 @@ import type {
   PrivateRouteInfo,
 } from '../shared/lib/router/router'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import ReactDOM from 'react-dom/client'
 import { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'
 import mitt from '../shared/lib/mitt'

packages/next/src/client/legacy/image.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
   useMemo,
   useState,
+  type JSX,
 } from 'react'
 import {
   imageConfigDefault,
@@ -257,7 +258,7 @@ export type ImageProps = Omit<
   quality?: SafeNumber
   priority?: boolean
   loading?: LoadingValue
-  lazyRoot?: React.RefObject<HTMLElement> | null
+  lazyRoot?: React.RefObject<HTMLElement | null> | null
   lazyBoundary?: string
   placeholder?: PlaceholderValue
   blurDataURL?: string

packages/next/src/client/script.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import ReactDOM from 'react-dom'
-import React, { useEffect, useContext, useRef } from 'react'
+import React, { useEffect, useContext, useRef, type JSX } from 'react'
 import type { ScriptHTMLAttributes } from 'react'
 import { HeadManagerContext } from '../shared/lib/head-manager-context.shared-runtime'
 import { setAttributesFromProps } from './set-attributes-from-props'

packages/next/src/client/use-intersection.tsx

@@ -10,7 +10,7 @@ type UseIntersectionObserverInit = Pick<
 >
 
 type UseIntersection = { disabled?: boolean } & UseIntersectionObserverInit & {
-    rootRef?: React.RefObject<HTMLElement> | null
+    rootRef?: React.RefObject<HTMLElement | null> | null
   }
 type ObserveCallback = (isVisible: boolean) => void
 type Identifier = {

packages/next/src/client/with-router.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import type {
   BaseContext,
   NextComponentType,

packages/next/src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import type { ReactElement, ReactNode } from 'react'
 import {
   OPTIMIZED_FONT_PROVIDERS,
@@ -98,19 +98,19 @@ function getPolyfillScripts(context: HtmlProps, props: OriginProps) {
     ))
 }
 
-function hasComponentProps(child: any): child is React.ReactElement {
+function hasComponentProps(child: any): child is React.ReactElement<any> {
   return !!child && !!child.props
 }
 
 function AmpStyles({
   styles,
 }: {
-  styles?: React.ReactElement[] | React.ReactFragment
+  styles?: React.ReactElement[] | Iterable<React.ReactNode>
 }) {
   if (!styles) return null
 
   // try to parse styles from fragment for backwards compat
-  const curStyles: React.ReactElement[] = Array.isArray(styles)
+  const curStyles: React.ReactElement<any>[] = Array.isArray(styles)
     ? (styles as React.ReactElement[])
     : []
   if (
@@ -119,7 +119,7 @@ function AmpStyles({
     // @ts-ignore Property 'props' does not exist on type ReactElement
     Array.isArray(styles.props.children)
   ) {
-    const hasStyles = (el: React.ReactElement) =>
+    const hasStyles = (el: React.ReactElement<any>) =>
       el?.props?.dangerouslySetInnerHTML?.__html
     // @ts-ignore Property 'props' does not exist on type ReactElement
     styles.props.children.forEach((child: React.ReactElement) => {

packages/next/src/server/app-render/app-render.tsx

@@ -18,7 +18,7 @@ import type { Revalidate } from '../lib/revalidate'
 import type { DeepReadonly } from '../../shared/lib/deep-readonly'
 import type { BaseNextRequest, BaseNextResponse } from '../base-http'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 
 import RenderResult, {
   type AppPageRenderResultMetadata,

packages/next/src/server/app-render/make-get-server-inserted-html.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { isNotFoundError } from '../../client/components/not-found'
 import {
   getURLFromRedirectError,

packages/next/src/server/app-render/server-inserted-html.tsx

@@ -1,7 +1,7 @@
 // Provider for the `useServerInsertedHTML` API to register callbacks to insert
 // elements into the HTML stream.
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import { ServerInsertedHTMLContext } from '../../shared/lib/server-inserted-html.shared-runtime'
 
 export function createServerInsertedHTML() {

packages/next/src/server/app-render/static/static-renderer.ts

@@ -4,6 +4,8 @@ import type {
 } from 'react-dom/server.edge'
 import type { Options as PrerenderOptions } from 'react-dom/static.edge'
 
+import type { JSX } from 'react'
+
 type RenderResult = {
   stream: ReadableStream<Uint8Array>
   postponed?: object | null

packages/next/src/server/future/route-modules/pages/builtin/_error.tsx

@@ -19,5 +19,6 @@ export const routeModule = new PagesRouteModule({
     App,
     Document,
   },
+  // @ts-expect-error -- Types don't account for getInitialProps. `Error` requires to be instantiated with `statusCode` but the types currently don't guarantee that.
   userland: moduleError,
 })

packages/next/src/server/render.tsx

@@ -40,7 +40,7 @@ import type { NextParsedUrlQuery } from './request-meta'
 import type { Revalidate, SwrDelta } from './lib/revalidate'
 import type { COMPILER_NAMES } from '../shared/lib/constants'
 
-import React from 'react'
+import React, { type JSX } from 'react'
 import ReactDOMServer from 'react-dom/server.browser'
 import { StyleRegistry, createStyleRegistry } from 'styled-jsx'
 import {

packages/next/src/shared/lib/app-dynamic.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import Loadable from './lazy-dynamic/loadable'
 
 import type {

packages/next/src/shared/lib/dynamic.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import Loadable from './loadable.shared-runtime'
 
 const isServerSide = typeof window === 'undefined'

packages/next/src/shared/lib/get-img-props.ts

@@ -7,6 +7,8 @@ import type {
   ImageLoaderPropsWithConfig,
 } from './image-config'
 
+import type { JSX } from 'react'
+
 export interface StaticImageData {
   src: string
   height: number

packages/next/src/shared/lib/head.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import React, { useContext } from 'react'
+import React, { useContext, type JSX } from 'react'
 import Effect from './side-effect'
 import { AmpStateContext } from './amp-context.shared-runtime'
 import { HeadManagerContext } from './head-manager-context.shared-runtime'
@@ -21,7 +21,7 @@ export function defaultHead(inAmpMode = false): JSX.Element[] {
 
 function onlyReactElement(
   list: Array<React.ReactElement<any>>,
-  child: React.ReactChild
+  child: React.ReactElement | number | string
 ): Array<React.ReactElement<any>> {
   // React children can be "string" or "number" in this case we ignore them for backwards compat
   if (typeof child === 'string' || typeof child === 'number') {
@@ -35,7 +35,7 @@ function onlyReactElement(
         // @ts-expect-error @types/react does not remove fragments but this could also return ReactPortal[]
         (
           fragmentList: Array<React.ReactElement<any>>,
-          fragmentChild: React.ReactChild
+          fragmentChild: React.ReactElement | number | string
         ): Array<React.ReactElement<any>> => {
           if (
             typeof fragmentChild === 'string' ||

packages/next/src/shared/lib/html-context.shared-runtime.ts

@@ -5,7 +5,7 @@ import type { FontConfig } from '../../server/font-utils'
 import type { NextFontManifest } from '../../build/webpack/plugins/next-font-manifest-plugin'
 import type { DeepReadonly } from './deep-readonly'
 
-import { createContext, useContext } from 'react'
+import { createContext, useContext, type JSX } from 'react'
 
 export type HtmlProps = {
   __NEXT_DATA__: NEXT_DATA
@@ -36,7 +36,7 @@ export type HtmlProps = {
   }
   locale?: string
   disableOptimizedLoading?: boolean
-  styles?: React.ReactElement[] | React.ReactFragment
+  styles?: React.ReactElement[] | Iterable<React.ReactNode>
   head?: Array<JSX.Element | null>
   crossOrigin?: 'anonymous' | 'use-credentials' | '' | undefined
   optimizeCss?: any

packages/next/src/shared/lib/side-effect.tsx

@@ -1,5 +1,5 @@
 import type React from 'react'
-import { Children, useEffect, useLayoutEffect } from 'react'
+import { Children, useEffect, useLayoutEffect, type JSX } from 'react'
 
 type State = JSX.Element[] | undefined
 

packages/next/src/shared/lib/utils.ts

@@ -1,5 +1,5 @@
 import type { HtmlProps } from './html-context.shared-runtime'
-import type { ComponentType } from 'react'
+import type { ComponentType, JSX } from 'react'
 import type { DomainLocale } from '../../server/config'
 import type { Env } from '@next/env'
 import type { IncomingMessage, ServerResponse } from 'http'
@@ -191,7 +191,7 @@ export type DocumentContext = NextPageContext & {
 }
 
 export type DocumentInitialProps = RenderPageResult & {
-  styles?: React.ReactElement[] | React.ReactFragment | JSX.Element
+  styles?: React.ReactElement[] | Iterable<React.ReactNode> | JSX.Element
 }
 
 export type DocumentProps = DocumentInitialProps & HtmlProps

packages/next/types/react-dom.d.ts

@@ -1,6 +1,7 @@
 declare module 'react-dom/server.browser'
 
 declare module 'react-dom/server.edge' {
+  import type { JSX } from 'react'
   /**
    * https://github.com/facebook/react/blob/aec521a96d3f1bebc2ba38553d14f4989c6e88e0/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L329-L333
    */
@@ -74,6 +75,7 @@ declare module 'react-dom/server.edge' {
 }
 
 declare module 'react-dom/static.edge' {
+  import type { JSX } from 'react'
   /**
    * https://github.com/facebook/react/blob/aec521a96d3f1bebc2ba38553d14f4989c6e88e0/packages/react-dom-bindings/src/server/ReactFizzConfigDOM.js#L329-L333
    */