Bump React types to 19 rc (#66186)

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
    */

pnpm-lock.yaml

@@ -13,8 +13,8 @@ overrides:
   '@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
@@ -61,7 +61,7 @@ importers:
         version: 11.11.0
       '@emotion/react':
         specifier: 11.11.1
-        version: 11.11.1(@types/react@18.3.3)(react@19.0.0-rc-f994737d14-20240522)
+        version: 11.11.1(react@19.0.0-rc-f994737d14-20240522)(types-react@19.0.0-rc.0)
       '@fullhuman/postcss-purgecss':
         specifier: 1.3.0
         version: 1.3.0
@@ -136,7 +136,7 @@ importers:
         version: 6.1.2(@types/jest@29.5.5)(jest@29.7.0)
       '@testing-library/react':
         specifier: ^15.0.5
-        version: 15.0.7(@types/react@18.3.3)(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)
+        version: 15.0.7(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)(types-react@19.0.0-rc.0)
       '@types/busboy':
         specifier: 1.5.3
         version: 1.5.3
@@ -171,11 +171,11 @@ importers:
         specifier: 2.6.1
         version: 2.6.1
       '@types/react':
-        specifier: 18.3.3
-        version: 18.3.3
+        specifier: npm:types-react@19.0.0-rc.0
+        version: /types-react@19.0.0-rc.0
       '@types/react-dom':
-        specifier: 18.3.0
-        version: 18.3.0
+        specifier: npm:types-react-dom@19.0.0-rc.0
+        version: /types-react-dom@19.0.0-rc.0
       '@types/relay-runtime':
         specifier: 14.1.13
         version: 14.1.13
@@ -1048,11 +1048,11 @@ importers:
         specifier: 1.3.4
         version: 1.3.4
       '@types/react':
-        specifier: 18.3.3
-        version: 18.3.3
+        specifier: npm:types-react@19.0.0-rc.0
+        version: /types-react@19.0.0-rc.0
       '@types/react-dom':
-        specifier: 18.3.0
-        version: 18.3.0
+        specifier: npm:types-react-dom@19.0.0-rc.0
+        version: /types-react-dom@19.0.0-rc.0
       '@types/react-is':
         specifier: 18.2.4
         version: 18.2.4
@@ -3650,7 +3650,7 @@ packages:
     resolution: {integrity: sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==}
     dev: true
 
-  /@emotion/react@11.11.1(@types/react@18.3.3)(react@19.0.0-rc-f994737d14-20240522):
+  /@emotion/react@11.11.1(react@19.0.0-rc-f994737d14-20240522)(types-react@19.0.0-rc.0):
     resolution: {integrity: sha512-5mlW1DquU5HaxjLkfkGN1GA/fvVGdyHURRiX/0FHl2cfIfRxSOfmxEH5YS43edp0OldZrZ+dkBKbngxcNCdZvA==}
     peerDependencies:
       '@types/react': '*'
@@ -3666,7 +3666,7 @@ packages:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@19.0.0-rc-f994737d14-20240522)
       '@emotion/utils': 1.2.1
       '@emotion/weak-memoize': 0.3.1
-      '@types/react': 18.3.3
+      '@types/react': /types-react@19.0.0-rc.0
       hoist-non-react-statics: 3.3.2
       react: 19.0.0-rc-f994737d14-20240522
     dev: true
@@ -5544,7 +5544,7 @@ packages:
       react: 19.0.0-rc-f994737d14-20240522
     dependencies:
       '@types/mdx': 2.0.3
-      '@types/react': 18.3.3
+      '@types/react': /types-react@19.0.0-rc.0
       react: 19.0.0-rc-f994737d14-20240522
 
   /@mswjs/cookies@0.2.2:
@@ -6913,11 +6913,11 @@ packages:
       redent: 3.0.0
     dev: true
 
-  /@testing-library/react@15.0.7(@types/react@18.3.3)(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522):
+  /@testing-library/react@15.0.7(react-dom@19.0.0-rc-f994737d14-20240522)(react@19.0.0-rc-f994737d14-20240522)(types-react@19.0.0-rc.0):
     resolution: {integrity: sha512-cg0RvEdD1TIhhkm1IeYMQxrzy0MtUNfa3minv4MjbgcYzJAZ7yD0i0lwoPOTPr+INtiXFezt2o8xMSnyHhEn2Q==}
     engines: {node: '>=18'}
     peerDependencies:
-      '@types/react': 18.3.3
+      '@types/react': npm:types-react@19.0.0-rc.0
       react: 19.0.0-rc-f994737d14-20240522
       react-dom: 19.0.0-rc-f994737d14-20240522
     peerDependenciesMeta:
@@ -6926,8 +6926,8 @@ packages:
     dependencies:
       '@babel/runtime': 7.22.5
       '@testing-library/dom': 10.1.0
-      '@types/react': 18.3.3
-      '@types/react-dom': 18.3.0
+      '@types/react': /types-react@19.0.0-rc.0
+      '@types/react-dom': /types-react-dom@19.0.0-rc.0
       react: 19.0.0-rc-f994737d14-20240522
       react-dom: 19.0.0-rc-f994737d14-20240522(react@19.0.0-rc-f994737d14-20240522)
     dev: true
@@ -7373,9 +7373,6 @@ packages:
       kleur: 3.0.3
     dev: true
 
-  /@types/prop-types@15.7.8:
-    resolution: {integrity: sha512-kMpQpfZKSCBqltAJwskgePRaYRFukDkm1oItcAbC3gNELR20XIBcN9VRgg4+m8DKsTfkWeA4m4Imp4DDuWy7FQ==}
-
   /@types/q@1.5.2:
     resolution: {integrity: sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==}
     dev: true
@@ -7388,24 +7385,12 @@ packages:
     resolution: {integrity: sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==}
     dev: true
 
-  /@types/react-dom@18.3.0:
-    resolution: {integrity: sha512-EhwApuTmMBmXuFOikhQLIBUn6uFg81SwLMOAUgodJF14SOBOCMdU04gDoYi0WOJJHD144TL32z4yDqCW3dnkQg==}
-    dependencies:
-      '@types/react': 18.3.3
-    dev: true
-
   /@types/react-is@18.2.4:
     resolution: {integrity: sha512-wBc7HgmbCcrvw0fZjxbgz/xrrlZKzEqmABBMeSvpTvdm25u6KI6xdIi9pRE2G0C1Lw5ETFdcn4UbYZ4/rpqUYw==}
     dependencies:
-      '@types/react': 18.3.3
+      '@types/react': /types-react@19.0.0-rc.0
     dev: true
 
-  /@types/react@18.3.3:
-    resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==}
-    dependencies:
-      '@types/prop-types': 15.7.8
-      csstype: 3.1.2
-
   /@types/relay-runtime@14.1.13:
     resolution: {integrity: sha512-NODqEnGjERJr02M0YQclUnXWCldmerNUkpFfuO317h/od1uXuwAW5131vpeiROE11BizPC/Qhup5VrwKsENazw==}
     dev: true
@@ -24481,6 +24466,17 @@ packages:
     resolution: {integrity: sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==}
     dev: true
 
+  /types-react-dom@19.0.0-rc.0:
+    resolution: {integrity: sha512-wGlQSD6H6EeCxhH+dSip1cPcCU7nNTOwHEr29rjiNtGkUPlmEofOizoQaPMEqQH2V76ME3NLvBDLGajRu3xZOw==}
+    dependencies:
+      '@types/react': /types-react@19.0.0-rc.0
+    dev: true
+
+  /types-react@19.0.0-rc.0:
+    resolution: {integrity: sha512-JFd3qtgXZ+EdHht8WXMPSF231brd6Bu4yLKqyo0JjpzhmjYxJptT6TBh/xFqOhx+ee2Nagj7Ttkh5F/jc49TVQ==}
+    dependencies:
+      csstype: 3.1.2
+
   /typescript@4.8.2:
     resolution: {integrity: sha512-C0I1UsrrDHo2fYI5oaCGbSejwX4ch+9Y5jTQELvovfmFkK3HHSZJB8MSJcWLmCUBzQBchCrZ9rMRV6GuNrvGtw==}
     engines: {node: '>=4.2.0'}

test/e2e/app-dir/mdx/types/mdx.d.ts

@@ -1,5 +1,6 @@
 // types/mdx.d.ts
 declare module '*.mdx' {
+  import type { JSX } from 'react'
   let MDXComponent: (props) => JSX.Element
   export default MDXComponent
 }

test/e2e/new-link-behavior/typescript/pages/ref.tsx

@@ -2,7 +2,7 @@ import { useRef, useEffect, useState } from 'react'
 import Link from 'next/link'
 
 export default function Page() {
-  const ref = useRef<HTMLAnchorElement>()
+  const ref = useRef<HTMLAnchorElement>(undefined)
   const [anchorText, setAnchorText] = useState(null)
 
   useEffect(() => {

test/integration/typescript-baseurl/components/hi.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function Hi(): JSX.Element {
   return <>Hi</>

test/integration/typescript-baseurl/components/world.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function World(): JSX.Element {
   return <>World</>

test/integration/typescript-baseurl/pages/hello.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { World } from 'components/world'
 export default function HelloPage(): JSX.Element {
   return (

test/integration/typescript-external-dir/project/components/world.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function World(): JSX.Element {
   return <>World</>

test/integration/typescript-external-dir/project/pages/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 import { World } from 'components/world'
 

test/integration/typescript-external-dir/shared/components/counter.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useState, type JSX } from 'react'
 
 import inc from '../libs/inc'
 

test/integration/typescript-paths/components/world.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function World(): JSX.Element {
   return <>World</>

test/integration/typescript-paths/pages/alias-to-d-ts.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import NotAliasedToDTS from 'd-ts-alias'
 
 export default function HelloPage(): JSX.Element {

test/integration/typescript-paths/pages/basic-alias.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { World } from '@c/world'
 export default function HelloPage(): JSX.Element {
   return (

test/integration/typescript-paths/pages/resolve-fallback.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import api from '@lib/b-only'
 export default function ResolveOrder(): JSX.Element {
   return <div>{api()}</div>

test/integration/typescript-paths/pages/resolve-order.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import api from '@lib/api'
 export default function ResolveOrder(): JSX.Element {
   return <div>{api()}</div>

test/integration/typescript-workspaces-paths/packages/www/components/world.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function World(): JSX.Element {
   return <>World</>

test/integration/typescript-workspaces-paths/packages/www/pages/alias-to-d-ts.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import NotAliasedToDTS from 'd-ts-alias'
 
 export default function HelloPage(): JSX.Element {

test/integration/typescript-workspaces-paths/packages/www/pages/basic-alias.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import { World } from '@c/world'
 export default function HelloPage(): JSX.Element {
   return (

test/integration/typescript-workspaces-paths/packages/www/pages/resolve-fallback.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import api from '@lib/b-only'
 export default function ResolveOrder(): JSX.Element {
   return <div>{api()}</div>

test/integration/typescript-workspaces-paths/packages/www/pages/resolve-order.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 import api from '@lib/api'
 export default function ResolveOrder(): JSX.Element {
   return <div>{api()}</div>

test/integration/typescript/components/world.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { type JSX } from 'react'
 
 export function World(): JSX.Element {
   return <>World</>

test/integration/typescript/pages/hello.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import React from 'react'
+import React, { type JSX } from 'react'
 import { hello } from '../components/hello'
 import Image from '../components/image'
 import Link from '../components/link'