refactor: prepare types for React 19 (#10746)

website/src/components/APITable/index.tsx

@@ -84,7 +84,7 @@ const APITableRowComp = React.forwardRef(APITableRow);
  * assumptions about how the children looks; however, those assumptions
  * should be generally correct in the MDX context.
  */
-export default function APITable({children, name}: Props): JSX.Element {
+export default function APITable({children, name}: Props): ReactNode {
   if (children.type !== 'table') {
     throw new Error(
       'Bad usage of APITable component.\nIt is probably that your Markdown table is malformed.\nMake sure to double-check you have the appropriate number of columns for each table row.',

website/src/components/BrowserWindow/IframeWindow.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 
 import BrowserWindow from './index';
 
 // Quick and dirty component, to improve later if needed
-export default function IframeWindow({url}: {url: string}): JSX.Element {
+export default function IframeWindow({url}: {url: string}): ReactNode {
   return (
     <div style={{padding: 10}}>
       <BrowserWindow

website/src/components/BrowserWindow/index.tsx

@@ -24,7 +24,7 @@ export default function BrowserWindow({
   url = 'http://localhost:3000',
   style,
   bodyStyle,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <div className={styles.browserWindow} style={{...style, minHeight}}>
       <div className={styles.browserWindowHeader}>

website/src/components/ColorGenerator/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect, useState} from 'react';
+import React, {type ReactNode, useEffect, useState} from 'react';
 import clsx from 'clsx';
 import Color from 'color';
 import Link from '@docusaurus/Link';
@@ -33,7 +33,7 @@ function wcagContrast(foreground: string, background: string) {
   return contrast > 7 ? 'AAA 🏅' : contrast > 4.5 ? 'AA 👍' : 'Fail 🔴';
 }
 
-export default function ColorGenerator(): JSX.Element {
+export default function ColorGenerator(): ReactNode {
   const {colorMode, setColorMode} = useColorMode();
 
   const isDarkTheme = colorMode === 'dark';

website/src/components/ConfigTabs.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Link from '@docusaurus/Link';
 import {useActiveVersion} from '@docusaurus/plugin-content-docs/client';
 import Translate, {translate} from '@docusaurus/Translate';
@@ -25,7 +25,7 @@ export default function ConfigTabs({
   code,
   pluginName,
   presetOptionName,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const versionPath = useActiveVersion(docsPluginId)!.path;
 
   return (

website/src/components/ErrorBoundaryTestButton/index.tsx

@@ -15,7 +15,7 @@ export default function ErrorBoundaryTestButton({
   children?: ReactNode;
   message?: string;
   cause?: string;
-}): JSX.Element {
+}): ReactNode {
   const [state, setState] = useState(false);
   if (state) {
     throw new Error(message, {

website/src/components/HackerNewsIcon.tsx

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Link from '@docusaurus/Link';
 
 export default function HackerNewsIcon({
   size = 54,
 }: {
   size?: number;
-}): JSX.Element {
+}): ReactNode {
   return (
     <Link
       to="https://news.ycombinator.com/item?id=32303052"

website/src/components/Highlight.tsx

@@ -13,7 +13,7 @@ export default function Highlight({
 }: {
   children: ReactNode;
   color: string;
-}): JSX.Element {
+}): ReactNode {
   return (
     <span
       style={{

website/src/components/NavbarItems/CustomDogfoodNavbarItem.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useLocation} from '@docusaurus/router';
 
 // used to dogfood custom navbar elements are possible
@@ -13,7 +13,7 @@ import {useLocation} from '@docusaurus/router';
 export default function CustomDogfoodNavbarItem(props: {
   content: string;
   mobile?: boolean;
-}): JSX.Element | null {
+}): ReactNode {
   const {pathname} = useLocation();
   const shouldRender = pathname === '/tests' || pathname.startsWith('/tests/');
   if (!shouldRender) {

website/src/components/Playground/index.tsx

@@ -7,7 +7,7 @@
 
 /* eslint-disable global-require */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
@@ -56,7 +56,7 @@ interface Props {
   image: string;
   url: string;
   urlTS: string;
-  description: JSX.Element;
+  description: ReactNode;
 }
 
 function PlaygroundCard({name, image, url, urlTS, description}: Props) {
@@ -92,7 +92,7 @@ function PlaygroundCard({name, image, url, urlTS, description}: Props) {
   );
 }
 
-export function PlaygroundCardsRow(): JSX.Element {
+export function PlaygroundCardsRow(): ReactNode {
   return (
     <div className="row">
       {Playgrounds.map((playground) => (

website/src/components/ProductHuntCard.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ComponentProps} from 'react';
+import type {ComponentProps, ReactNode} from 'react';
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -16,7 +16,7 @@ export default function ProductHuntCard({
 }: {
   className?: string;
   style?: ComponentProps<'a'>['style'];
-}): JSX.Element {
+}): ReactNode {
   return (
     <Link
       to="https://www.producthunt.com/posts/docusaurus-2-0?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-docusaurus-2-0"

website/src/components/Svg/index.tsx

@@ -18,7 +18,7 @@ export type SvgIconProps = ComponentProps<'svg'> & {
   children: ReactNode; // Node passed into the SVG element.
 };
 
-export default function Svg(props: SvgIconProps): JSX.Element {
+export default function Svg(props: SvgIconProps): ReactNode {
   const {
     svgClass,
     colorAttr,

website/src/components/TeamProfileCards/index.tsx

@@ -78,7 +78,7 @@ function TeamProfileCardCol(props: ProfileProps) {
   );
 }
 
-export function ActiveTeamRow(): JSX.Element {
+export function ActiveTeamRow(): ReactNode {
   return (
     <div className="row">
       <TeamProfileCardCol
@@ -117,7 +117,7 @@ export function ActiveTeamRow(): JSX.Element {
   );
 }
 
-export function HonoraryAlumniTeamRow(): JSX.Element {
+export function HonoraryAlumniTeamRow(): ReactNode {
   return (
     <div className="row">
       <TeamProfileCardCol
@@ -168,7 +168,7 @@ export function HonoraryAlumniTeamRow(): JSX.Element {
   );
 }
 
-export function StudentFellowsTeamRow(): JSX.Element {
+export function StudentFellowsTeamRow(): ReactNode {
   return (
     <div className="row">
       <TeamProfileCardCol

website/src/components/Tweet/index.tsx

@@ -28,7 +28,7 @@ export default function Tweet({
   content,
   date,
   githubUsername,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <div className={clsx('card', styles.tweet)}>
       <div className="card__header">

website/src/components/TweetQuote/index.tsx

@@ -26,7 +26,7 @@ export default function TweetQuote({
   name,
   job,
   children,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const avatar = `https://unavatar.io/x/${handle}`;
   const profileUrl = `https://x.com/${handle}`;
   return (

website/src/components/UpgradeGuide/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {
   useLatestVersion,
   useActiveDocContext,
@@ -114,7 +114,7 @@ function VersionNotice() {
   return null;
 }
 
-export default function UpgradeGuide(): JSX.Element {
+export default function UpgradeGuide(): ReactNode {
   return (
     <>
       <VersionNotice />

website/src/components/Versions.tsx

@@ -27,11 +27,7 @@ type ContextValue = {
 
 const Context = React.createContext<ContextValue | null>(null);
 
-export function VersionsProvider({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element {
+export function VersionsProvider({children}: {children: ReactNode}): ReactNode {
   const [canaryVersion, setCanaryVersion] = useState<ContextValue | null>(null);
   const mounted = useRef(true);
   useEffect(() => {
@@ -70,7 +66,7 @@ function useStableVersion(): string {
     : lastVersion;
 }
 
-export function CanaryVersion(): JSX.Element {
+export function CanaryVersion(): ReactNode {
   const canaryVersion = useContext(Context);
   // Show a sensible name
   return canaryVersion ? (
@@ -90,7 +86,7 @@ export function CanaryVersion(): JSX.Element {
   );
 }
 
-export function StableVersion(): JSX.Element {
+export function StableVersion(): ReactNode {
   const currentVersion = useStableVersion();
   return <span>{currentVersion}</span>;
 }
@@ -104,17 +100,17 @@ function useStableMajorVersionNumber(): number {
   return useNextMajorVersionNumber() - 1;
 }
 
-export function NextMajorVersion(): JSX.Element {
+export function NextMajorVersion(): ReactNode {
   const majorVersionNumber = useNextMajorVersionNumber();
   return <span>{majorVersionNumber}</span>;
 }
 
-export function StableMajorVersion(): JSX.Element {
+export function StableMajorVersion(): ReactNode {
   const majorVersionNumber = useStableMajorVersionNumber();
   return <span>{majorVersionNumber}</span>;
 }
 
-function GitBranchLink({branch}: {branch: string}): JSX.Element {
+function GitBranchLink({branch}: {branch: string}): ReactNode {
   return (
     <Link to={`https://github.com/facebook/docusaurus/tree/${branch}`}>
       <code>{branch}</code>
@@ -122,13 +118,13 @@ function GitBranchLink({branch}: {branch: string}): JSX.Element {
   );
 }
 
-export function StableMajorBranchLink(): JSX.Element {
+export function StableMajorBranchLink(): ReactNode {
   const majorVersionNumber = useStableMajorVersionNumber();
   const branch = `docusaurus-v${majorVersionNumber}`;
   return <GitBranchLink branch={branch} />;
 }
 
-export function NextMajorBranchLink(): JSX.Element {
+export function NextMajorBranchLink(): ReactNode {
   return <GitBranchLink branch="main" />;
 }
 
@@ -156,7 +152,7 @@ export function InsertIfCanaryVersionKnown({
   return null;
 }
 
-export function PackageJSONDiff(): JSX.Element {
+export function PackageJSONDiff(): ReactNode {
   const canaryVersion = useContext(Context)?.name ?? '0.0.0-4922';
   const stableVersion = useStableVersion();
   return (
@@ -170,7 +166,7 @@ export function PackageJSONDiff(): JSX.Element {
   );
 }
 
-export function PublishTime(): JSX.Element | null {
+export function PublishTime(): ReactNode {
   const time = useContext(Context)?.time;
   if (!time) {
     return null;

website/src/data/features.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 
 export type FeatureItem = {
@@ -15,7 +15,7 @@ export type FeatureItem = {
     width: number;
     height: number;
   };
-  text: JSX.Element;
+  text: ReactNode;
 };
 
 const FEATURES: FeatureItem[] = [

website/src/pages/index.tsx

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import LiteYouTubeEmbed from 'react-lite-youtube-embed';
 import Link from '@docusaurus/Link';
@@ -257,7 +258,7 @@ function TopBanner() {
   );
 }
 
-export default function Home(): JSX.Element {
+export default function Home(): ReactNode {
   const {
     siteConfig: {customFields, tagline},
   } = useDocusaurusContext();

website/src/pages/showcase/index.tsx

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 
 import Link from '@docusaurus/Link';
@@ -35,7 +36,7 @@ function ShowcaseHeader() {
   );
 }
 
-export default function Showcase(): JSX.Element {
+export default function Showcase(): ReactNode {
   return (
     <Layout title={TITLE} description={DESCRIPTION}>
       <main className="margin-vert--lg">

website/src/pages/versions.tsx

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ReactNode} from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
@@ -34,7 +35,7 @@ function ReleaseNotesLabel() {
   );
 }
 
-export default function Version(): JSX.Element {
+export default function Version(): ReactNode {
   const {
     siteConfig: {organizationName, projectName},
   } = useDocusaurusContext();

website/src/plugins/changelog/theme/ChangelogItem/Header/Author/index.tsx

@@ -5,17 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/Blog/Components/Author';
 
 import styles from './styles.module.css';
 
-export default function ChangelogAuthor({
-  author,
-  className,
-}: Props): JSX.Element {
+export default function ChangelogAuthor({author, className}: Props): ReactNode {
   const {name, url, imageURL} = author;
   return (
     <div className={clsx('avatar margin-bottom--sm', className)}>

website/src/plugins/changelog/theme/ChangelogItem/Header/Authors/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useState} from 'react';
+import React, {type ReactNode, useState} from 'react';
 import clsx from 'clsx';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import ChangelogItemHeaderAuthor from '@theme/ChangelogItem/Header/Author';
@@ -15,9 +15,7 @@ import type {Props} from '@theme/BlogPostItem/Header/Authors';
 import styles from './styles.module.css';
 
 // Component responsible for the authors layout
-export default function BlogPostAuthors({
-  className,
-}: Props): JSX.Element | null {
+export default function BlogPostAuthors({className}: Props): ReactNode {
   const {
     metadata: {authors},
     assets,

website/src/plugins/changelog/theme/ChangelogItem/Header/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
 import BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
@@ -24,7 +24,7 @@ function ChangelogTitle() {
   );
 }
 
-export default function ChangelogItemHeader(): JSX.Element {
+export default function ChangelogItemHeader(): ReactNode {
   return (
     <header>
       <ChangelogTitle />

website/src/plugins/changelog/theme/ChangelogItem/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import ChangelogItemHeader from '@theme/ChangelogItem/Header';
 import type {Props} from '@theme/BlogPostItem';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
@@ -13,7 +13,7 @@ import BlogPostItemContent from '@theme/BlogPostItem/Content';
 
 import styles from './styles.module.css';
 
-export default function ChangelogItem({children}: Props): JSX.Element {
+export default function ChangelogItem({children}: Props): ReactNode {
   return (
     <BlogPostItemContainer className={styles.changelogItemContainer}>
       <ChangelogItemHeader />

website/src/plugins/changelog/theme/ChangelogList/Header/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import Heading from '@theme/Heading';
@@ -61,7 +61,7 @@ export default function ChangelogListHeader({
   blogTitle,
 }: {
   blogTitle: string;
-}): JSX.Element {
+}): ReactNode {
   return (
     <header className="margin-bottom--lg">
       <Heading as="h1" style={{fontSize: '3rem'}}>

website/src/plugins/changelog/theme/ChangelogList/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import clsx from 'clsx';
 import {
   PageMetadata,
@@ -20,7 +20,7 @@ import ChangelogItem from '@theme/ChangelogItem';
 import ChangelogListHeader from '@theme/ChangelogList/Header';
 import type {Props} from '@theme/BlogListPage';
 
-function ChangelogListMetadata(props: Props): JSX.Element {
+function ChangelogListMetadata(props: Props): ReactNode {
   const {metadata} = props;
   const {blogTitle, blogDescription} = metadata;
   return (
@@ -31,7 +31,7 @@ function ChangelogListMetadata(props: Props): JSX.Element {
   );
 }
 
-function ChangelogListContent(props: Props): JSX.Element {
+function ChangelogListContent(props: Props): ReactNode {
   const {metadata, items, sidebar} = props;
   const {blogTitle} = metadata;
   return (
@@ -43,7 +43,7 @@ function ChangelogListContent(props: Props): JSX.Element {
   );
 }
 
-export default function ChangelogList(props: Props): JSX.Element {
+export default function ChangelogList(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

website/src/plugins/changelog/theme/ChangelogPage/index.tsx

@@ -39,7 +39,7 @@ function ChangelogPageContent({
 }: {
   sidebar: BlogSidebar;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter} = metadata;
   const {
@@ -73,7 +73,7 @@ function ChangelogPageContent({
 // This page doesn't change anything. It's just swapping BlogPostItem with our
 // own ChangelogItem. We don't want to apply the swizzled item to the actual
 // blog.
-export default function ChangelogPage(props: Props): JSX.Element {
+export default function ChangelogPage(props: Props): ReactNode {
   const ChangelogContent = props.content;
   return (
     <BlogPostProvider content={props.content} isBlogPostPage>

website/src/plugins/changelog/theme/ChangelogPaginator/index.tsx

@@ -7,12 +7,12 @@
 
 // Changed the text labels.
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
-export default function ChangelogPaginator(props: Props): JSX.Element {
+export default function ChangelogPaginator(props: Props): ReactNode {
   const {nextItem, prevItem} = props;
 
   return (

website/src/plugins/changelog/theme/Icon/Expand/index.tsx

@@ -5,11 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 
 import type {Props} from '@theme/Icon/Expand';
 
-export default function IconExpand({expanded, ...props}: Props): JSX.Element {
+export default function IconExpand({expanded, ...props}: Props): ReactNode {
   if (expanded) {
     return (
       <svg

website/src/plugins/changelog/theme/types.d.ts

@@ -16,11 +16,11 @@ declare module '@theme/ChangelogList';
 declare module '@theme/ChangelogList/Header';
 
 declare module '@theme/Icon/Expand' {
-  import type {ComponentProps} from 'react';
+  import type {ComponentProps, ReactNode} from 'react';
 
   export interface Props extends ComponentProps<'svg'> {
     expanded?: boolean;
   }
 
-  export default function IconExpand(props: Props): JSX.Element;
+  export default function IconExpand(props: Props): ReactNode;
 }

website/src/plugins/featureRequests/FeatureRequestsPage.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useEffect} from 'react';
+import React, {type ReactNode, useEffect} from 'react';
 import clsx from 'clsx';
 import {useColorMode} from '@docusaurus/theme-common';
 import Layout from '@theme/Layout';
@@ -48,7 +48,7 @@ export default function FeatureRequests({
   basePath,
 }: {
   basePath: string;
-}): JSX.Element {
+}): ReactNode {
   return (
     <Layout title="Feedback" description="Docusaurus 2 Feature Requests page">
       <CannyWidget basePath={basePath} />

website/src/theme/Admonition/Types.tsx

@@ -5,12 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import type {Props} from '@theme/Admonition';
 import DefaultAdmonitionTypes from '@theme-original/Admonition/Types';
 import Heading from '@theme/Heading';
 
-function MyCustomAdmonition(props: Props): JSX.Element {
+function MyCustomAdmonition(props: Props): ReactNode {
   return (
     <div style={{border: 'solid red', padding: 10}}>
       <Heading as="h5" style={{color: 'blue', fontSize: 30}}>

website/src/theme/CodeBlock/index.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import CodeBlock from '@theme-original/CodeBlock';
 import type {Props} from '@theme/CodeBlock';
 
 // This component does nothing on purpose
 // Dogfood: wrapping a theme component already enhanced by another theme
 // See https://github.com/facebook/docusaurus/pull/5983
-export default function CodeBlockWrapper(props: Props): JSX.Element {
+export default function CodeBlockWrapper(props: Props): ReactNode {
   return <CodeBlock {...props} />;
 }

website/src/theme/ColorModeToggle.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import OriginalToggle from '@theme-original/ColorModeToggle';
 import {
   lightStorage,
@@ -24,7 +24,7 @@ import type {Props} from '@theme/ColorModeToggle';
 // session storage, and we need to apply the same style when toggling modes even
 // when we are not on the styling-layout page. The only way to do this so far is
 // by hooking into the Toggle component.
-export default function ColorModeToggle(props: Props): JSX.Element {
+export default function ColorModeToggle(props: Props): ReactNode {
   return (
     <OriginalToggle
       {...props}

website/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import {useLayoutDoc} from '@docusaurus/plugin-content-docs/client';
 import Link from '@docusaurus/Link';
 import Translate from '@docusaurus/Translate';
@@ -34,7 +34,7 @@ function HintFooter() {
 
 export default function DocCategoryGeneratedIndexPageWrapper(
   props: Props,
-): JSX.Element {
+): ReactNode {
   return (
     <>
       <DocCategoryGeneratedIndexPage {...props} />

website/src/theme/Layout/index.tsx

@@ -5,13 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, {type ReactNode} from 'react';
 import Layout from '@theme-original/Layout';
 import type {Props} from '@theme/Layout';
 
 // This component is only used to test for CSS insertion order
 import './styles.module.css';
 
-export default function LayoutWrapper(props: Props): JSX.Element {
+export default function LayoutWrapper(props: Props): ReactNode {
   return <Layout {...props} />;
 }

website/src/theme/ReactLiveScope/components.tsx

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 
-export function ButtonExample(props: ComponentProps<'button'>): JSX.Element {
+export function ButtonExample(props: ComponentProps<'button'>): ReactNode {
   return (
     <button
       type="button"