react.dev: Compat with React 19 types

package.json

@@ -52,8 +52,8 @@
     "@types/mdx-js__react": "^1.5.2",
     "@types/node": "^14.6.4",
     "@types/parse-numeric-range": "^0.0.1",
-    "@types/react": "^18.0.9",
-    "@types/react-dom": "^18.0.5",
+    "@types/react": "npm:types-react@19.0.0",
+    "@types/react-dom": "npm:types-react-dom@19.0.0",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
     "@typescript-eslint/parser": "^5.36.2",
     "asyncro": "^3.0.0",
@@ -96,6 +96,11 @@
     "unist-util-visit": "^2.0.3",
     "webpack-bundle-analyzer": "^4.5.0"
   },
+  "resolutions": {
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
+    "@types/react-is": "npm:[email protected]"
+  },
   "engines": {
     "node": "^16.8.0 || ^18.0.0 || ^19.0.0 || ^20.0.0"
   },

src/components/ExternalLink.tsx

@@ -1,3 +1,4 @@
+import type {JSX} from 'react';
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */

src/components/Icon/IconArrow.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconArrow = memo<

src/components/Icon/IconArrowSmall.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconArrowSmall = memo<

src/components/Icon/IconCanary.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconCanary = memo<JSX.IntrinsicElements['svg'] & {title?: string}>(
   function IconCanary({className, title}) {

src/components/Icon/IconChevron.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconChevron = memo<

src/components/Icon/IconClose.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconClose = memo<JSX.IntrinsicElements['svg']>(function IconClose(
   props

src/components/Icon/IconCodeBlock.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconCodeBlock = memo<JSX.IntrinsicElements['svg']>(
   function IconCodeBlock({className}) {

src/components/Icon/IconCopy.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconCopy = memo<JSX.IntrinsicElements['svg']>(function IconCopy({
   className,

src/components/Icon/IconDeepDive.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconDeepDive = memo<JSX.IntrinsicElements['svg']>(
   function IconDeepDive({className}) {

src/components/Icon/IconDownload.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconDownload = memo<JSX.IntrinsicElements['svg']>(
   function IconDownload({className}) {

src/components/Icon/IconError.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconError = memo<JSX.IntrinsicElements['svg']>(function IconError({
   className,

src/components/Icon/IconFacebookCircle.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconFacebookCircle = memo<JSX.IntrinsicElements['svg']>(
   function IconFacebookCircle(props) {

src/components/Icon/IconGitHub.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconGitHub = memo<JSX.IntrinsicElements['svg']>(
   function IconGitHub(props) {

src/components/Icon/IconHamburger.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconHamburger = memo<JSX.IntrinsicElements['svg']>(
   function IconHamburger(props) {

src/components/Icon/IconHint.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconHint = memo<JSX.IntrinsicElements['svg']>(function IconHint({

src/components/Icon/IconInstagram.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconInstagram = memo<JSX.IntrinsicElements['svg']>(
   function IconInstagram(props) {

src/components/Icon/IconLink.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconLink = memo<JSX.IntrinsicElements['svg']>(function IconLink(
   props

src/components/Icon/IconNavArrow.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconNavArrow = memo<

src/components/Icon/IconNewPage.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconNewPage = memo<JSX.IntrinsicElements['svg']>(
   function IconNewPage(props) {

src/components/Icon/IconNote.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconNote = memo<JSX.IntrinsicElements['svg']>(function IconNote({
   className,

src/components/Icon/IconPitfall.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconPitfall = memo<JSX.IntrinsicElements['svg']>(
   function IconPitfall({className}) {

src/components/Icon/IconRestart.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconRestart = memo<JSX.IntrinsicElements['svg']>(
   function IconRestart({className}) {

src/components/Icon/IconRss.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconRss = memo<JSX.IntrinsicElements['svg']>(function IconRss(
   props

src/components/Icon/IconSearch.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconSearch = memo<JSX.IntrinsicElements['svg']>(
   function IconSearch(props) {

src/components/Icon/IconSolution.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 import cn from 'classnames';
 
 export const IconSolution = memo<JSX.IntrinsicElements['svg']>(

src/components/Icon/IconTerminal.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconTerminal = memo<JSX.IntrinsicElements['svg']>(
   function IconTerminal({className}) {

src/components/Icon/IconThreads.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconThreads = memo<JSX.IntrinsicElements['svg']>(
   function IconThreads(props) {

src/components/Icon/IconTwitter.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconTwitter = memo<JSX.IntrinsicElements['svg']>(
   function IconTwitter(props) {

src/components/Icon/IconWarning.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {memo} from 'react';
+import {memo, type JSX} from 'react';
 
 export const IconWarning = memo<JSX.IntrinsicElements['svg']>(
   function IconWarning({className}) {

src/components/Logo.tsx

@@ -1,3 +1,4 @@
+import type {JSX} from 'react';
 /*
  * Copyright (c) Facebook, Inc. and its affiliates.
  */

src/components/MDX/Challenges/Challenges.tsx

@@ -29,7 +29,7 @@ export interface ChallengeContents {
 }
 
 const parseChallengeContents = (
-  children: React.ReactElement[]
+  children: React.ReactElement<any>[]
 ): ChallengeContents[] => {
   const contents: ChallengeContents[] = [];
 

src/components/MDX/CodeBlock/CodeBlock.tsx

@@ -289,7 +289,7 @@ function getSyntaxHighlight(theme: any): HighlightStyle {
 
 function getLineDecorators(
   code: string,
-  meta: string
+  meta: string | undefined
 ): Array<{
   line: number;
   className: string;
@@ -309,7 +309,7 @@ function getLineDecorators(
 
 function getInlineDecorators(
   code: string,
-  meta: string
+  meta: string | undefined
 ): Array<{
   step: number;
   line: number;

src/components/MDX/ConsoleBlock.tsx

@@ -34,7 +34,7 @@ function ConsoleBlock({level = 'error', children}: ConsoleBlockProps) {
   if (typeof children === 'string') {
     message = children;
   } else if (isValidElement(children)) {
-    message = children.props.children;
+    message = (children as React.ReactElement<any>).props.children;
   }
 
   return (

src/components/MDX/InlineCode.tsx

@@ -4,6 +4,8 @@
 
 import cn from 'classnames';
 
+import type {JSX} from 'react';
+
 interface InlineCodeProps {
   isLink?: boolean;
   meta?: string;

src/components/MDX/MDXComponents.tsx

@@ -2,7 +2,7 @@
  * Copyright (c) Facebook, Inc. and its affiliates.
  */
 
-import {Children, useContext, useMemo} from 'react';
+import {Children, useContext, useMemo, type JSX} from 'react';
 import * as React from 'react';
 import cn from 'classnames';
 

src/components/MDX/Sandpack/LoadingOverlay.tsx

@@ -1,4 +1,4 @@
-import {useState} from 'react';
+import {useState, type JSX} from 'react';
 
 import {
   LoadingOverlayState,

src/components/MDX/Sandpack/createFileMap.ts

@@ -10,7 +10,10 @@ export const SUPPORTED_FILES = [AppJSPath, StylesCSSPath];
 
 export const createFileMap = (codeSnippets: any) => {
   return codeSnippets.reduce(
-    (result: Record<string, SandpackFile>, codeSnippet: React.ReactElement) => {
+    (
+      result: Record<string, SandpackFile>,
+      codeSnippet: React.ReactElement<any>
+    ) => {
       if (
         (codeSnippet.type as any).mdxName !== 'pre' &&
         codeSnippet.type !== 'pre'

src/components/MDX/TerminalBlock.tsx

@@ -31,9 +31,9 @@ function TerminalBlock({level = 'info', children}: TerminalBlockProps) {
     message = children;
   } else if (
     isValidElement(children) &&
-    typeof children.props.children === 'string'
+    typeof (children.props as any).children === 'string'
   ) {
-    message = children.props.children;
+    message = (children.props as any).children;
   } else {
     throw Error('Expected TerminalBlock children to be a plain string.');
   }

src/utils/forwardRefWithAs.tsx

@@ -69,11 +69,6 @@ export interface ComponentWithAs<ComponentType extends As, ComponentProps> {
   ): React.ReactElement | null;
 
   displayName?: string;
-  propTypes?: React.WeakValidationMap<
-    PropsWithAs<ComponentType, ComponentProps>
-  >;
-  contextTypes?: React.ValidationMap<any>;
-  defaultProps?: Partial<PropsWithAs<ComponentType, ComponentProps>>;
 }
 
 /**