refactor: prepare types for React 19 (#10746)

packages/create-docusaurus/templates/classic-typescript/src/components/HomepageFeatures/index.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
@@ -5,7 +6,7 @@ import styles from './styles.module.css';
 type FeatureItem = {
   title: string;
   Svg: React.ComponentType<React.ComponentProps<'svg'>>;
-  description: JSX.Element;
+  description: ReactNode;
 };
 
 const FeatureList: FeatureItem[] = [
@@ -55,7 +56,7 @@ function Feature({title, Svg, description}: FeatureItem) {
   );
 }
 
-export default function HomepageFeatures(): JSX.Element {
+export default function HomepageFeatures(): ReactNode {
   return (
     <section className={styles.features}>
       <div className="container">

packages/create-docusaurus/templates/classic-typescript/src/pages/index.tsx

@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -28,7 +29,7 @@ function HomepageHeader() {
   );
 }
 
-export default function Home(): JSX.Element {
+export default function Home(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <Layout

packages/docusaurus-mdx-loader/src/index.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import type {ReactNode} from 'react';
+
 import {mdxLoader} from './loader';
 
 import type {TOCItem as TOCItemImported} from './remark/toc/types';
@@ -34,7 +36,7 @@ export type LoadedMDXContent<FrontMatter, Metadata, Assets = undefined> = {
    * in priority.
    */
   readonly assets: Assets;
-  (): JSX.Element;
+  (): ReactNode;
 };
 
 export type {MDXPlugin} from './loader';

packages/docusaurus-module-type-aliases/src/index.d.ts

@@ -84,10 +84,11 @@ declare module '@theme-original/*';
 declare module '@theme-init/*';
 
 declare module '@theme/Error' {
+  import type {ReactNode} from 'react';
   import type {FallbackParams} from '@docusaurus/ErrorBoundary';
 
   export interface Props extends FallbackParams {}
-  export default function Error(props: Props): JSX.Element;
+  export default function Error(props: Props): ReactNode;
 }
 
 declare module '@theme/Layout' {
@@ -96,17 +97,20 @@ declare module '@theme/Layout' {
   export interface Props {
     readonly children?: ReactNode;
   }
-  export default function Layout(props: Props): JSX.Element;
+  export default function Layout(props: Props): ReactNode;
 }
 
 declare module '@theme/Loading' {
+  import type {ReactNode} from 'react';
   import type {LoadingComponentProps} from 'react-loadable';
 
-  export default function Loading(props: LoadingComponentProps): JSX.Element;
+  export default function Loading(props: LoadingComponentProps): ReactNode;
 }
 
 declare module '@theme/NotFound' {
-  export default function NotFound(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function NotFound(): ReactNode;
 }
 
 declare module '@theme/Root' {
@@ -115,11 +119,13 @@ declare module '@theme/Root' {
   export interface Props {
     readonly children: ReactNode;
   }
-  export default function Root({children}: Props): JSX.Element;
+  export default function Root({children}: Props): ReactNode;
 }
 
 declare module '@theme/SiteMetadata' {
-  export default function SiteMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function SiteMetadata(): ReactNode;
 }
 
 declare module '@docusaurus/constants' {
@@ -134,13 +140,13 @@ declare module '@docusaurus/ErrorBoundary' {
     readonly tryAgain: () => void;
   };
 
-  export type FallbackFunction = (params: FallbackParams) => JSX.Element;
+  export type FallbackFunction = (params: FallbackParams) => ReactNode;
 
   export interface Props {
     readonly fallback?: FallbackFunction;
     readonly children: ReactNode;
   }
-  export default function ErrorBoundary(props: Props): JSX.Element;
+  export default function ErrorBoundary(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Head' {
@@ -149,11 +155,11 @@ declare module '@docusaurus/Head' {
 
   export type Props = HelmetProps & {children: ReactNode};
 
-  export default function Head(props: Props): JSX.Element;
+  export default function Head(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Link' {
-  import type {CSSProperties, ComponentProps} from 'react';
+  import type {CSSProperties, ComponentProps, ReactNode} from 'react';
   import type {NavLinkProps as RRNavLinkProps} from 'react-router-dom';
 
   type NavLinkProps = Partial<RRNavLinkProps>;
@@ -169,7 +175,7 @@ declare module '@docusaurus/Link' {
       /** Escape hatch in case broken links check doesn't make sense. */
       readonly 'data-noBrokenLinkCheck'?: boolean;
     };
-  export default function Link(props: Props): JSX.Element;
+  export default function Link(props: Props): ReactNode;
 }
 
 declare module '@docusaurus/Interpolate' {
@@ -203,7 +209,7 @@ declare module '@docusaurus/Interpolate' {
 
   export default function Interpolate<Str extends string>(
     props: InterpolateProps<Str>,
-  ): JSX.Element;
+  ): ReactNode;
 }
 
 declare module '@docusaurus/Translate' {
@@ -241,7 +247,7 @@ declare module '@docusaurus/Translate' {
 
   export default function Translate<Str extends string>(
     props: TranslateProps<Str>,
-  ): JSX.Element;
+  ): ReactNode;
 }
 
 declare module '@docusaurus/router' {
@@ -318,11 +324,13 @@ declare module '@docusaurus/ComponentCreator' {
 }
 
 declare module '@docusaurus/BrowserOnly' {
+  import type {ReactNode} from 'react';
+
   export interface Props {
-    readonly children?: () => JSX.Element;
-    readonly fallback?: JSX.Element;
+    readonly children?: () => ReactNode;
+    readonly fallback?: ReactNode;
   }
-  export default function BrowserOnly(props: Props): JSX.Element | null;
+  export default function BrowserOnly(props: Props): ReactNode | null;
 }
 
 declare module '@docusaurus/isInternalUrl' {

packages/docusaurus-plugin-content-blog/src/client/contexts.tsx

@@ -74,7 +74,7 @@ export function BlogPostProvider({
   children: ReactNode;
   content: PropBlogPostContent;
   isBlogPostPage?: boolean;
-}): JSX.Element {
+}): ReactNode {
   const contextValue = useContextValue({content, isBlogPostPage});
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

packages/docusaurus-plugin-content-blog/src/plugin-content-blog.d.ts

@@ -663,6 +663,7 @@ declare module '@docusaurus/plugin-content-blog' {
 }
 
 declare module '@theme/BlogPostPage' {
+  import type {ReactNode} from 'react';
   import type {
     BlogPostFrontMatter,
     BlogSidebar,
@@ -683,18 +684,23 @@ declare module '@theme/BlogPostPage' {
     readonly blogMetadata: BlogMetadata;
   }
 
-  export default function BlogPostPage(props: Props): JSX.Element;
+  export default function BlogPostPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogPostPage/Metadata' {
-  export default function BlogPostPageMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function BlogPostPageMetadata(): ReactNode;
 }
 
 declare module '@theme/BlogPostPage/StructuredData' {
-  export default function BlogPostStructuredData(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function BlogPostStructuredData(): ReactNode;
 }
 
 declare module '@theme/BlogListPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -713,10 +719,11 @@ declare module '@theme/BlogListPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogListPage(props: Props): JSX.Element;
+  export default function BlogListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogListPage/StructuredData' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -735,10 +742,11 @@ declare module '@theme/BlogListPage/StructuredData' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogListPageStructuredData(props: Props): JSX.Element;
+  export default function BlogListPageStructuredData(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogTagsListPage' {
+  import type {ReactNode} from 'react';
   import type {BlogSidebar} from '@docusaurus/plugin-content-blog';
   import type {TagsListItem} from '@docusaurus/utils';
 
@@ -749,10 +757,11 @@ declare module '@theme/BlogTagsListPage' {
     readonly tags: TagsListItem[];
   }
 
-  export default function BlogTagsListPage(props: Props): JSX.Element;
+  export default function BlogTagsListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/Blog/Pages/BlogAuthorsListPage' {
+  import type {ReactNode} from 'react';
   import type {
     AuthorItemProp,
     BlogSidebar,
@@ -765,10 +774,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsListPage' {
     readonly authors: AuthorItemProp[];
   }
 
-  export default function BlogAuthorsListPage(props: Props): JSX.Element;
+  export default function BlogAuthorsListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     AuthorItemProp,
@@ -790,10 +800,11 @@ declare module '@theme/Blog/Pages/BlogAuthorsPostsPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogAuthorsPostsPage(props: Props): JSX.Element;
+  export default function BlogAuthorsPostsPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogTagsPostsPage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
   import type {
     BlogSidebar,
@@ -815,10 +826,11 @@ declare module '@theme/BlogTagsPostsPage' {
     readonly items: readonly {readonly content: Content}[];
   }
 
-  export default function BlogTagsPostsPage(props: Props): JSX.Element;
+  export default function BlogTagsPostsPage(props: Props): ReactNode;
 }
 
 declare module '@theme/BlogArchivePage' {
+  import type {ReactNode} from 'react';
   import type {Content} from '@theme/BlogPostPage';
 
   /** We may add extra metadata or prune some metadata from here */
@@ -832,5 +844,5 @@ declare module '@theme/BlogArchivePage' {
     };
   }
 
-  export default function BlogArchivePage(props: Props): JSX.Element;
+  export default function BlogArchivePage(props: Props): ReactNode;
 }

packages/docusaurus-plugin-content-docs/src/client/doc.tsx

@@ -50,7 +50,7 @@ export function DocProvider({
 }: {
   children: ReactNode;
   content: PropDocContent;
-}): JSX.Element {
+}): ReactNode {
   const contextValue = useContextValue(content);
   return <Context.Provider value={contextValue}>{children}</Context.Provider>;
 }

packages/docusaurus-plugin-content-docs/src/client/docSidebarItemsExpandedState.tsx

@@ -36,7 +36,7 @@ export function DocSidebarItemsExpandedStateProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const [expandedItem, setExpandedItem] = useState<number | null>(null);
   const contextValue = useMemo(
     () => ({expandedItem, setExpandedItem}),

packages/docusaurus-plugin-content-docs/src/client/docsPreferredVersion.tsx

@@ -163,7 +163,7 @@ function DocsPreferredVersionContextProviderUnsafe({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const value = useContextValue();
   return <Context.Provider value={value}>{children}</Context.Provider>;
 }
@@ -176,7 +176,7 @@ export function DocsPreferredVersionContextProvider({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   return (
     <DocsPreferredVersionContextProviderUnsafe>
       {children}

packages/docusaurus-plugin-content-docs/src/client/docsSidebar.tsx

@@ -30,7 +30,7 @@ export function DocsSidebarProvider({
   children: ReactNode;
   name: string | undefined;
   items: PropSidebar | undefined;
-}): JSX.Element {
+}): ReactNode {
   const stableValue: ContextValue | null = useMemo(
     () => (name && items ? {name, items} : null),
     [name, items],

packages/docusaurus-plugin-content-docs/src/client/docsUtils.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {useMemo} from 'react';
+import {type ReactNode, useMemo} from 'react';
 import {matchPath, useLocation} from '@docusaurus/router';
 import renderRoutes from '@docusaurus/renderRoutes';
 import {
@@ -363,7 +363,7 @@ Available doc ids are:
  */
 export function useDocRootMetadata({route}: DocRootProps): null | {
   /** The element that should be rendered at the current location. */
-  docElement: JSX.Element;
+  docElement: ReactNode;
   /**
    * The name of the sidebar associated with the current doc. `sidebarName` and
    * `sidebarItems` correspond to the value of {@link useDocsSidebar}.

packages/docusaurus-plugin-content-docs/src/client/docsVersion.tsx

@@ -20,7 +20,7 @@ export function DocsVersionProvider({
 }: {
   children: ReactNode;
   version: PropVersionMetadata | null;
-}): JSX.Element {
+}): ReactNode {
   return <Context.Provider value={version}>{children}</Context.Provider>;
 }
 

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -562,10 +562,11 @@ declare module '@docusaurus/plugin-content-docs' {
 }
 
 declare module '@theme/DocItem' {
+  import type {ReactNode} from 'react';
   import type {PropDocContent} from '@docusaurus/plugin-content-docs';
 
   export type DocumentRoute = {
-    readonly component: () => JSX.Element;
+    readonly component: () => ReactNode;
     readonly exact: boolean;
     readonly path: string;
     readonly sidebar?: string;
@@ -576,10 +577,11 @@ declare module '@theme/DocItem' {
     readonly content: PropDocContent;
   }
 
-  export default function DocItem(props: Props): JSX.Element;
+  export default function DocItem(props: Props): ReactNode;
 }
 
 declare module '@theme/DocCategoryGeneratedIndexPage' {
+  import type {ReactNode} from 'react';
   import type {PropCategoryGeneratedIndex} from '@docusaurus/plugin-content-docs';
 
   export interface Props {
@@ -588,39 +590,45 @@ declare module '@theme/DocCategoryGeneratedIndexPage' {
 
   export default function DocCategoryGeneratedIndexPage(
     props: Props,
-  ): JSX.Element;
+  ): ReactNode;
 }
 
 declare module '@theme/DocTagsListPage' {
+  import type {ReactNode} from 'react';
   import type {PropTagsListPage} from '@docusaurus/plugin-content-docs';
 
   export interface Props extends PropTagsListPage {}
-  export default function DocTagsListPage(props: Props): JSX.Element;
+  export default function DocTagsListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/DocTagDocListPage' {
+  import type {ReactNode} from 'react';
   import type {PropTagDocList} from '@docusaurus/plugin-content-docs';
 
   export interface Props {
     readonly tag: PropTagDocList;
   }
-  export default function DocTagDocListPage(props: Props): JSX.Element;
+  export default function DocTagDocListPage(props: Props): ReactNode;
 }
 
 declare module '@theme/DocBreadcrumbs' {
-  export default function DocBreadcrumbs(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DocBreadcrumbs(): ReactNode;
 }
 
 declare module '@theme/DocsRoot' {
+  import type {ReactNode} from 'react';
   import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
 
   export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
 
-  export default function DocsRoot(props: Props): JSX.Element;
+  export default function DocsRoot(props: Props): ReactNode;
 }
 
 declare module '@theme/DocVersionRoot' {
+  import type {ReactNode} from 'react';
   import type {PropVersionMetadata} from '@docusaurus/plugin-content-docs';
   import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
@@ -629,14 +637,15 @@ declare module '@theme/DocVersionRoot' {
     readonly version: PropVersionMetadata;
   }
 
-  export default function DocVersionRoot(props: Props): JSX.Element;
+  export default function DocVersionRoot(props: Props): ReactNode;
 }
 
 declare module '@theme/DocRoot' {
+  import type {ReactNode} from 'react';
   import type {RouteConfigComponentProps} from 'react-router-config';
   import type {Required} from 'utility-types';
 
   export interface Props extends Required<RouteConfigComponentProps, 'route'> {}
 
-  export default function DocRoot(props: Props): JSX.Element;
+  export default function DocRoot(props: Props): ReactNode;
 }

packages/docusaurus-plugin-content-pages/src/plugin-content-pages.d.ts

@@ -85,6 +85,7 @@ declare module '@docusaurus/plugin-content-pages' {
 }
 
 declare module '@theme/MDXPage' {
+  import type {ReactNode} from 'react';
   import type {LoadedMDXContent} from '@docusaurus/mdx-loader';
   import type {
     MDXPageMetadata,
@@ -100,5 +101,5 @@ declare module '@theme/MDXPage' {
     >;
   }
 
-  export default function MDXPage(props: Props): JSX.Element;
+  export default function MDXPage(props: Props): ReactNode;
 }

packages/docusaurus-plugin-debug/src/plugin-debug.d.ts

@@ -14,46 +14,57 @@ declare module '@docusaurus/plugin-debug' {
 }
 
 declare module '@theme/DebugConfig' {
-  export default function DebugMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DebugMetadata(): ReactNode;
 }
 
 declare module '@theme/DebugContent' {
+  import type {ReactNode} from 'react';
   import type {AllContent} from '@docusaurus/types';
 
   export interface Props {
     readonly allContent: AllContent;
   }
-  export default function DebugContent(props: Props): JSX.Element;
+  export default function DebugContent(props: Props): ReactNode;
 }
 
 declare module '@theme/DebugGlobalData' {
-  export default function DebugGlobalData(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DebugGlobalData(): ReactNode;
 }
 
 declare module '@theme/DebugJsonView' {
+  import type {ReactNode} from 'react';
+
   export interface Props {
     readonly src: unknown;
     readonly collapseDepth?: number;
   }
-  export default function DebugJsonView(props: Props): JSX.Element;
+  export default function DebugJsonView(props: Props): ReactNode;
 }
 
 declare module '@theme/DebugLayout' {
   import type {ReactNode} from 'react';
 
-  export default function DebugLayout(props: {
-    children: ReactNode;
-  }): JSX.Element;
+  export default function DebugLayout(props: {children: ReactNode}): ReactNode;
 }
 
 declare module '@theme/DebugRegistry' {
-  export default function DebugRegistry(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DebugRegistry(): ReactNode;
 }
 
 declare module '@theme/DebugRoutes' {
-  export default function DebugRoutes(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DebugRoutes(): ReactNode;
 }
 
 declare module '@theme/DebugSiteMetadata' {
-  export default function DebugSiteMetadata(): JSX.Element;
+  import type {ReactNode} from 'react';
+
+  export default function DebugSiteMetadata(): ReactNode;
 }

packages/docusaurus-plugin-debug/src/theme/DebugConfig/index.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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
 
-export default function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): ReactNode {
   const {siteConfig} = useDocusaurusContext();
   return (
     <DebugLayout>

packages/docusaurus-plugin-debug/src/theme/DebugContent/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 DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
@@ -52,7 +52,7 @@ function PluginContent({
   );
 }
 
-export default function DebugContent({allContent}: Props): JSX.Element {
+export default function DebugContent({allContent}: Props): ReactNode {
   return (
     <DebugLayout>
       <h2>Plugin content</h2>

packages/docusaurus-plugin-debug/src/theme/DebugGlobalData/index.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 useGlobalData from '@docusaurus/useGlobalData';
 import DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
 
-export default function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): ReactNode {
   const globalData = useGlobalData();
   return (
     <DebugLayout>

packages/docusaurus-plugin-debug/src/theme/DebugJsonView/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 {
   JsonView,
   defaultStyles,
@@ -32,10 +32,7 @@ const paraisoStyles: JsonViewProps['style'] = {
   collapsedContent: styles.collapseContentParaiso!,
 };
 
-export default function DebugJsonView({
-  src,
-  collapseDepth,
-}: Props): JSX.Element {
+export default function DebugJsonView({src, collapseDepth}: Props): ReactNode {
   return (
     <JsonView
       data={src as object}

packages/docusaurus-plugin-debug/src/theme/DebugLayout/index.tsx

@@ -29,7 +29,7 @@ export default function DebugLayout({
   children,
 }: {
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   return (
     <>
       <Head>

packages/docusaurus-plugin-debug/src/theme/DebugRegistry/index.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 registry from '@generated/registry';
 import DebugLayout from '@theme/DebugLayout';
 import styles from './styles.module.css';
 
-export default function DebugRegistry(): JSX.Element {
+export default function DebugRegistry(): ReactNode {
   return (
     <DebugLayout>
       <h2>Registry</h2>

packages/docusaurus-plugin-debug/src/theme/DebugRoutes/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 routes from '@generated/routes';
 import DebugLayout from '@theme/DebugLayout';
 import DebugJsonView from '@theme/DebugJsonView';
 import styles from './styles.module.css';
 
-export default function DebugRoutes(): JSX.Element {
+export default function DebugRoutes(): ReactNode {
   return (
     <DebugLayout>
       <h2>Routes</h2>

packages/docusaurus-plugin-debug/src/theme/DebugSiteMetadata/index.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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import DebugLayout from '@theme/DebugLayout';
 import styles from './styles.module.css';
 
-export default function DebugMetadata(): JSX.Element {
+export default function DebugMetadata(): ReactNode {
   const {siteMetadata} = useDocusaurusContext();
   return (
     <DebugLayout>

packages/docusaurus-plugin-ideal-image/src/deps.d.ts

@@ -13,7 +13,12 @@
  * full state object.
  */
 declare module '@slorber/react-ideal-image' {
-  import type {ComponentProps, ComponentType, CSSProperties} from 'react';
+  import type {
+    ComponentProps,
+    ComponentType,
+    CSSProperties,
+    ReactNode,
+  } from 'react';
 
   export type LoadingState = 'initial' | 'loading' | 'loaded' | 'error';
 
@@ -115,5 +120,5 @@ declare module '@slorber/react-ideal-image' {
     width: number;
   }
 
-  export default function IdealImage(props: ImageProps): JSX.Element;
+  export default function IdealImage(props: ImageProps): ReactNode;
 }

packages/docusaurus-plugin-ideal-image/src/plugin-ideal-image.d.ts

@@ -52,7 +52,7 @@ declare module '@docusaurus/plugin-ideal-image' {
 }
 
 declare module '@theme/IdealImage' {
-  import type {ComponentProps} from 'react';
+  import type {ComponentProps, ReactNode} from 'react';
 
   export type SrcType = {
     width: number;
@@ -72,5 +72,5 @@ declare module '@theme/IdealImage' {
   export interface Props extends ComponentProps<'img'> {
     readonly img: {default: string} | {src: SrcImage; preSrc: string} | string;
   }
-  export default function IdealImage(props: Props): JSX.Element;
+  export default function IdealImage(props: Props): ReactNode;
 }

packages/docusaurus-plugin-ideal-image/src/theme/IdealImage/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 ReactIdealImage, {
   type IconKey,
   type State,
@@ -80,7 +80,7 @@ function getMessage(icon: IconKey, state: State) {
   }
 }
 
-export default function IdealImage(props: Props): JSX.Element {
+export default function IdealImage(props: Props): ReactNode {
   const {img, ...propsRest} = props;
 
   // In dev env just use regular img with original file

packages/docusaurus-plugin-pwa/src/plugin-pwa.d.ts

@@ -76,6 +76,8 @@ declare module '@docusaurus/plugin-pwa' {
 }
 
 declare module '@theme/PwaReloadPopup' {
+  import type {ReactNode} from 'react';
+
   export interface Props {
     /**
      * The popup should call this callback when the `reload` button is clicked.
@@ -84,5 +86,5 @@ declare module '@theme/PwaReloadPopup' {
      */
     readonly onReload: () => void;
   }
-  export default function PwaReloadPopup(props: Props): JSX.Element;
+  export default function PwaReloadPopup(props: Props): ReactNode;
 }

packages/docusaurus-plugin-pwa/src/theme/PwaReloadPopup/index.tsx

@@ -5,14 +5,14 @@
  * 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 Translate, {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/PwaReloadPopup';
 
 import styles from './styles.module.css';
 
-export default function PwaReloadPopup({onReload}: Props): JSX.Element | false {
+export default function PwaReloadPopup({onReload}: Props): ReactNode {
   const [isVisible, setIsVisible] = useState(true);
 
   return (

packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Danger.tsx

@@ -5,10 +5,10 @@
  * 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/Icon/Danger';
 
-export default function AdmonitionIconDanger(props: Props): JSX.Element {
+export default function AdmonitionIconDanger(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 12 16" {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Info.tsx

@@ -5,10 +5,10 @@
  * 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/Icon/Info';
 
-export default function AdmonitionIconInfo(props: Props): JSX.Element {
+export default function AdmonitionIconInfo(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 14 16" {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Note.tsx

@@ -5,10 +5,10 @@
  * 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/Icon/Note';
 
-export default function AdmonitionIconNote(props: Props): JSX.Element {
+export default function AdmonitionIconNote(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 14 16" {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Tip.tsx

@@ -5,10 +5,10 @@
  * 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/Icon/Tip';
 
-export default function AdmonitionIconTip(props: Props): JSX.Element {
+export default function AdmonitionIconTip(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 12 16" {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Admonition/Icon/Warning.tsx

@@ -5,10 +5,10 @@
  * 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/Icon/Warning';
 
-export default function AdmonitionIconCaution(props: Props): JSX.Element {
+export default function AdmonitionIconCaution(props: Props): ReactNode {
   return (
     <svg viewBox="0 0 16 16" {...props}>
       <path

packages/docusaurus-theme-classic/src/theme/Admonition/Layout/index.tsx

@@ -46,7 +46,7 @@ function AdmonitionContent({children}: Pick<Props, 'children'>) {
   ) : null;
 }
 
-export default function AdmonitionLayout(props: Props): JSX.Element {
+export default function AdmonitionLayout(props: Props): ReactNode {
   const {type, icon, title, children, className} = props;
   return (
     <AdmonitionContainer type={type} className={className}>

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Caution.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Caution';
@@ -27,7 +27,7 @@ const defaultProps = {
 
 // TODO remove before v4: Caution replaced by Warning
 // see https://github.com/facebook/docusaurus/issues/7558
-export default function AdmonitionTypeCaution(props: Props): JSX.Element {
+export default function AdmonitionTypeCaution(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Danger.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Danger';
@@ -25,7 +25,7 @@ const defaultProps = {
   ),
 };
 
-export default function AdmonitionTypeDanger(props: Props): JSX.Element {
+export default function AdmonitionTypeDanger(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Info.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Info';
@@ -25,7 +25,7 @@ const defaultProps = {
   ),
 };
 
-export default function AdmonitionTypeInfo(props: Props): JSX.Element {
+export default function AdmonitionTypeInfo(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Note.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Note';
@@ -25,7 +25,7 @@ const defaultProps = {
   ),
 };
 
-export default function AdmonitionTypeNote(props: Props): JSX.Element {
+export default function AdmonitionTypeNote(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Tip.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Tip';
@@ -25,7 +25,7 @@ const defaultProps = {
   ),
 };
 
-export default function AdmonitionTypeTip(props: Props): JSX.Element {
+export default function AdmonitionTypeTip(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/Type/Warning.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 Translate from '@docusaurus/Translate';
 import type {Props} from '@theme/Admonition/Type/Warning';
@@ -25,7 +25,7 @@ const defaultProps = {
   ),
 };
 
-export default function AdmonitionTypeWarning(props: Props): JSX.Element {
+export default function AdmonitionTypeWarning(props: Props): ReactNode {
   return (
     <AdmonitionLayout
       {...defaultProps}

packages/docusaurus-theme-classic/src/theme/Admonition/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentType} from 'react';
+import React, {type ComponentType, type ReactNode} from 'react';
 import {processAdmonitionProps} from '@docusaurus/theme-common';
 import type {Props} from '@theme/Admonition';
 import AdmonitionTypes from '@theme/Admonition/Types';
@@ -21,7 +21,7 @@ function getAdmonitionTypeComponent(type: string): ComponentType<Props> {
   return AdmonitionTypes.info!;
 }
 
-export default function Admonition(unprocessedProps: Props): JSX.Element {
+export default function Admonition(unprocessedProps: Props): ReactNode {
   const props = processAdmonitionProps(unprocessedProps);
   const AdmonitionTypeComponent = getAdmonitionTypeComponent(props.type);
   return <AdmonitionTypeComponent {...props} />;

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/CloseButton/index.tsx

@@ -5,16 +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 {translate} from '@docusaurus/Translate';
 import IconClose from '@theme/Icon/Close';
 import type {Props} from '@theme/AnnouncementBar/CloseButton';
 import styles from './styles.module.css';
 
-export default function AnnouncementBarCloseButton(
-  props: Props,
-): JSX.Element | null {
+export default function AnnouncementBarCloseButton(props: Props): ReactNode {
   return (
     <button
       type="button"

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/Content/index.tsx

@@ -5,15 +5,13 @@
  * 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 {useThemeConfig} from '@docusaurus/theme-common';
 import type {Props} from '@theme/AnnouncementBar/Content';
 import styles from './styles.module.css';
 
-export default function AnnouncementBarContent(
-  props: Props,
-): JSX.Element | null {
+export default function AnnouncementBarContent(props: Props): ReactNode {
   const {announcementBar} = useThemeConfig();
   const {content} = announcementBar!;
   return (

packages/docusaurus-theme-classic/src/theme/AnnouncementBar/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 {useThemeConfig} from '@docusaurus/theme-common';
 import {useAnnouncementBar} from '@docusaurus/theme-common/internal';
 import AnnouncementBarCloseButton from '@theme/AnnouncementBar/CloseButton';
@@ -13,7 +13,7 @@ import AnnouncementBarContent from '@theme/AnnouncementBar/Content';
 
 import styles from './styles.module.css';
 
-export default function AnnouncementBar(): JSX.Element | null {
+export default function AnnouncementBar(): ReactNode {
   const {announcementBar} = useThemeConfig();
   const {isActive, close} = useAnnouncementBar();
   if (!isActive) {

packages/docusaurus-theme-classic/src/theme/BackToTopButton/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 {translate} from '@docusaurus/Translate';
 import {ThemeClassNames} from '@docusaurus/theme-common';
@@ -13,7 +13,7 @@ import {useBackToTopButton} from '@docusaurus/theme-common/internal';
 
 import styles from './styles.module.css';
 
-export default function BackToTopButton(): JSX.Element {
+export default function BackToTopButton(): ReactNode {
   const {shown, scrollToTop} = useBackToTopButton({threshold: 300});
   return (
     <button

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/Socials/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {ComponentType} from 'react';
+import type {ComponentType, ReactNode} from 'react';
 import React from 'react';
 import clsx from 'clsx';
 import Link from '@docusaurus/Link';
@@ -54,7 +54,7 @@ export default function BlogAuthorSocials({
   author,
 }: {
   author: Props['author'];
-}): JSX.Element {
+}): ReactNode {
   const entries = Object.entries(author.socials ?? {});
   return (
     <div className={styles.authorSocials}>

packages/docusaurus-theme-classic/src/theme/Blog/Components/Author/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 Link, {type Props as LinkProps} from '@docusaurus/Link';
 import AuthorSocials from '@theme/Blog/Components/Author/Socials';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/Blog/Components/Author';
 import Heading from '@theme/Heading';
 import styles from './styles.module.css';
 
-function MaybeLink(props: LinkProps): JSX.Element {
+function MaybeLink(props: LinkProps): ReactNode {
   if (props.href) {
     return <Link {...props} />;
   }
@@ -53,7 +53,7 @@ export default function BlogAuthor({
   author,
   className,
   count,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {name, title, url, imageURL, email, page} = author;
   const link =
     page?.permalink || url || (email && `mailto:${email}`) || undefined;

packages/docusaurus-theme-classic/src/theme/Blog/Pages/BlogAuthorsPostsPage/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,
@@ -26,7 +26,7 @@ import type {Props} from '@theme/Blog/Pages/BlogAuthorsPostsPage';
 import BlogPostItems from '@theme/BlogPostItems';
 import Author from '@theme/Blog/Components/Author';
 
-function Metadata({author}: Props): JSX.Element {
+function Metadata({author}: Props): ReactNode {
   const title = useBlogAuthorPageTitle(author);
   return (
     <>
@@ -45,7 +45,7 @@ function ViewAllAuthorsLink() {
   );
 }
 
-function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
+function Content({author, items, sidebar, listMetadata}: Props): ReactNode {
   return (
     <BlogLayout sidebar={sidebar}>
       <header className="margin-bottom--xl">
@@ -68,7 +68,7 @@ function Content({author, items, sidebar, listMetadata}: Props): JSX.Element {
   );
 }
 
-export default function BlogAuthorsPostsPage(props: Props): JSX.Element {
+export default function BlogAuthorsPostsPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

packages/docusaurus-theme-classic/src/theme/BlogArchivePage/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 Link from '@docusaurus/Link';
 import {translate} from '@docusaurus/Translate';
 import {PageMetadata} from '@docusaurus/theme-common';
@@ -76,7 +76,7 @@ function listPostsByYears(blogPosts: readonly ArchiveBlogPost[]): YearProp[] {
   }));
 }
 
-export default function BlogArchive({archive}: Props): JSX.Element {
+export default function BlogArchive({archive}: Props): ReactNode {
   const title = translate({
     id: 'theme.blog.archive.title',
     message: 'Archive',

packages/docusaurus-theme-classic/src/theme/BlogLayout/index.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 clsx from 'clsx';
 import Layout from '@theme/Layout';
 import BlogSidebar from '@theme/BlogSidebar';
 
 import type {Props} from '@theme/BlogLayout';
 
-export default function BlogLayout(props: Props): JSX.Element {
+export default function BlogLayout(props: Props): ReactNode {
   const {sidebar, toc, children, ...layoutProps} = props;
   const hasSidebar = sidebar && sidebar.items.length > 0;
 

packages/docusaurus-theme-classic/src/theme/BlogListPage/StructuredData/index.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 Head from '@docusaurus/Head';
 import {useBlogListPageStructuredData} from '@docusaurus/plugin-content-blog/client';
 import type {Props} from '@theme/BlogListPage/StructuredData';
 
-export default function BlogListPageStructuredData(props: Props): JSX.Element {
+export default function BlogListPageStructuredData(props: Props): ReactNode {
   const structuredData = useBlogListPageStructuredData(props);
   return (
     <Head>

packages/docusaurus-theme-classic/src/theme/BlogListPage/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 useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@@ -21,7 +21,7 @@ import type {Props} from '@theme/BlogListPage';
 import BlogPostItems from '@theme/BlogPostItems';
 import BlogListPageStructuredData from '@theme/BlogListPage/StructuredData';
 
-function BlogListPageMetadata(props: Props): JSX.Element {
+function BlogListPageMetadata(props: Props): ReactNode {
   const {metadata} = props;
   const {
     siteConfig: {title: siteTitle},
@@ -37,7 +37,7 @@ function BlogListPageMetadata(props: Props): JSX.Element {
   );
 }
 
-function BlogListPageContent(props: Props): JSX.Element {
+function BlogListPageContent(props: Props): ReactNode {
   const {metadata, items, sidebar} = props;
   return (
     <BlogLayout sidebar={sidebar}>
@@ -47,7 +47,7 @@ function BlogListPageContent(props: Props): JSX.Element {
   );
 }
 
-export default function BlogListPage(props: Props): JSX.Element {
+export default function BlogListPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

packages/docusaurus-theme-classic/src/theme/BlogListPaginator/index.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 Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogListPaginator';
 
-export default function BlogListPaginator(props: Props): JSX.Element {
+export default function BlogListPaginator(props: Props): ReactNode {
   const {metadata} = props;
   const {previousPage, nextPage} = metadata;
 

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Container/index.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/BlogPostItem/Container';
 
 export default function BlogPostItemContainer({
   children,
   className,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return <article className={className}>{children}</article>;
 }

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Content/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 {blogPostContainerID} from '@docusaurus/utils-common';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
@@ -15,7 +15,7 @@ import type {Props} from '@theme/BlogPostItem/Content';
 export default function BlogPostItemContent({
   children,
   className,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {isBlogPostPage} = useBlogPost();
   return (
     <div

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/ReadMoreLink/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, {translate} from '@docusaurus/Translate';
 import Link from '@docusaurus/Link';
 import type {Props} from '@theme/BlogPostItem/Footer/ReadMoreLink';
@@ -24,7 +24,7 @@ function ReadMoreLabel() {
 
 export default function BlogPostItemFooterReadMoreLink(
   props: Props,
-): JSX.Element {
+): ReactNode {
   const {blogPostTitle, ...linkProps} = props;
   return (
     <Link

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Footer/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 {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import {ThemeClassNames} from '@docusaurus/theme-common';
@@ -13,7 +13,7 @@ import EditMetaRow from '@theme/EditMetaRow';
 import TagsListInline from '@theme/TagsListInline';
 import ReadMoreLink from '@theme/BlogPostItem/Footer/ReadMoreLink';
 
-export default function BlogPostItemFooter(): JSX.Element | null {
+export default function BlogPostItemFooter(): ReactNode {
   const {metadata, isBlogPostPage} = useBlogPost();
   const {
     tags,

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Authors/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 {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogAuthor from '@theme/Blog/Components/Author';
@@ -15,7 +15,7 @@ import styles from './styles.module.css';
 // Component responsible for the authors layout
 export default function BlogPostItemHeaderAuthors({
   className,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const {
     metadata: {authors},
     assets,

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Info/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 {translate} from '@docusaurus/Translate';
 import {usePluralForm} from '@docusaurus/theme-common';
@@ -54,9 +54,7 @@ function Spacer() {
   return <>{' · '}</>;
 }
 
-export default function BlogPostItemHeaderInfo({
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemHeaderInfo({className}: Props): ReactNode {
   const {metadata} = useBlogPost();
   const {date, readingTime} = metadata;
 

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/Title/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 Link from '@docusaurus/Link';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
@@ -13,9 +13,7 @@ import type {Props} from '@theme/BlogPostItem/Header/Title';
 
 import styles from './styles.module.css';
 
-export default function BlogPostItemHeaderTitle({
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItemHeaderTitle({className}: Props): ReactNode {
   const {metadata, isBlogPostPage} = useBlogPost();
   const {permalink, title} = metadata;
   const TitleHeading = isBlogPostPage ? 'h1' : 'h2';

packages/docusaurus-theme-classic/src/theme/BlogPostItem/Header/index.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 BlogPostItemHeaderTitle from '@theme/BlogPostItem/Header/Title';
 import BlogPostItemHeaderInfo from '@theme/BlogPostItem/Header/Info';
 import BlogPostItemHeaderAuthors from '@theme/BlogPostItem/Header/Authors';
 
-export default function BlogPostItemHeader(): JSX.Element {
+export default function BlogPostItemHeader(): ReactNode {
   return (
     <header>
       <BlogPostItemHeaderTitle />

packages/docusaurus-theme-classic/src/theme/BlogPostItem/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 {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItemContainer from '@theme/BlogPostItem/Container';
@@ -20,10 +20,7 @@ function useContainerClassName() {
   return !isBlogPostPage ? 'margin-bottom--xl' : undefined;
 }
 
-export default function BlogPostItem({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function BlogPostItem({children, className}: Props): ReactNode {
   const containerClassName = useContainerClassName();
   return (
     <BlogPostItemContainer className={clsx(containerClassName, className)}>

packages/docusaurus-theme-classic/src/theme/BlogPostItems/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 {BlogPostProvider} from '@docusaurus/plugin-content-blog/client';
 import BlogPostItem from '@theme/BlogPostItem';
 import type {Props} from '@theme/BlogPostItems';
@@ -13,7 +13,7 @@ import type {Props} from '@theme/BlogPostItems';
 export default function BlogPostItems({
   items,
   component: BlogPostItemComponent = BlogPostItem,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <>
       {items.map(({content: BlogPostContent}) => (

packages/docusaurus-theme-classic/src/theme/BlogPostPage/Metadata/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 {PageMetadata} from '@docusaurus/theme-common';
 import {useBlogPost} from '@docusaurus/plugin-content-blog/client';
 
-export default function BlogPostPageMetadata(): JSX.Element {
+export default function BlogPostPageMetadata(): ReactNode {
   const {assets, metadata} = useBlogPost();
   const {title, description, date, tags, authors, frontMatter} = metadata;
 

packages/docusaurus-theme-classic/src/theme/BlogPostPage/StructuredData/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 Head from '@docusaurus/Head';
 import {useBlogPostStructuredData} from '@docusaurus/plugin-content-blog/client';
 
-export default function BlogPostStructuredData(): JSX.Element {
+export default function BlogPostStructuredData(): ReactNode {
   const structuredData = useBlogPostStructuredData();
   return (
     <Head>

packages/docusaurus-theme-classic/src/theme/BlogPostPage/index.tsx

@@ -28,7 +28,7 @@ function BlogPostPageContent({
 }: {
   sidebar: BlogSidebar;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   const {metadata, toc} = useBlogPost();
   const {nextItem, prevItem, frontMatter} = metadata;
   const {
@@ -59,7 +59,7 @@ function BlogPostPageContent({
   );
 }
 
-export default function BlogPostPage(props: Props): JSX.Element {
+export default function BlogPostPage(props: Props): ReactNode {
   const BlogPostContent = props.content;
   return (
     <BlogPostProvider content={props.content} isBlogPostPage>

packages/docusaurus-theme-classic/src/theme/BlogPostPaginator/index.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 Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/BlogPostPaginator';
 
-export default function BlogPostPaginator(props: Props): JSX.Element {
+export default function BlogPostPaginator(props: Props): ReactNode {
   const {nextItem, prevItem} = props;
 
   return (

packages/docusaurus-theme-classic/src/theme/BlogSidebar/Mobile/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {memo} from 'react';
+import React, {memo, type ReactNode} from 'react';
 import {
   useVisibleBlogSidebarItems,
   BlogSidebarItemList,
@@ -29,7 +29,7 @@ const ListComponent: BlogSidebarContentProps['ListComponent'] = ({items}) => {
   );
 };
 
-function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
+function BlogSidebarMobileSecondaryMenu({sidebar}: Props): ReactNode {
   const items = useVisibleBlogSidebarItems(sidebar.items);
   return (
     <BlogSidebarContent
@@ -40,7 +40,7 @@ function BlogSidebarMobileSecondaryMenu({sidebar}: Props): JSX.Element {
   );
 }
 
-function BlogSidebarMobile(props: Props): JSX.Element {
+function BlogSidebarMobile(props: Props): ReactNode {
   return (
     <NavbarSecondaryMenuFiller
       component={BlogSidebarMobileSecondaryMenu}

packages/docusaurus-theme-classic/src/theme/BlogSidebar/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 {useWindowSize} from '@docusaurus/theme-common';
 import BlogSidebarDesktop from '@theme/BlogSidebar/Desktop';
 import BlogSidebarMobile from '@theme/BlogSidebar/Mobile';
 import type {Props} from '@theme/BlogSidebar';
 
-export default function BlogSidebar({sidebar}: Props): JSX.Element | null {
+export default function BlogSidebar({sidebar}: Props): ReactNode {
   const windowSize = useWindowSize();
   if (!sidebar?.items.length) {
     return null;

packages/docusaurus-theme-classic/src/theme/BlogTagsListPage/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,
@@ -19,7 +19,7 @@ import type {Props} from '@theme/BlogTagsListPage';
 import SearchMetadata from '@theme/SearchMetadata';
 import Heading from '@theme/Heading';
 
-export default function BlogTagsListPage({tags, sidebar}: Props): JSX.Element {
+export default function BlogTagsListPage({tags, sidebar}: Props): ReactNode {
   const title = translateTagsPageTitle();
   return (
     <HtmlClassNameProvider

packages/docusaurus-theme-classic/src/theme/BlogTagsPostsPage/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 Translate from '@docusaurus/Translate';
 import {
@@ -23,7 +23,7 @@ import BlogPostItems from '@theme/BlogPostItems';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
 import Heading from '@theme/Heading';
 
-function BlogTagsPostsPageMetadata({tag}: Props): JSX.Element {
+function BlogTagsPostsPageMetadata({tag}: Props): ReactNode {
   const title = useBlogTagsPostsPageTitle(tag);
   return (
     <>
@@ -38,7 +38,7 @@ function BlogTagsPostsPageContent({
   items,
   sidebar,
   listMetadata,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const title = useBlogTagsPostsPageTitle(tag);
   return (
     <BlogLayout sidebar={sidebar}>
@@ -59,7 +59,7 @@ function BlogTagsPostsPageContent({
     </BlogLayout>
   );
 }
-export default function BlogTagsPostsPage(props: Props): JSX.Element {
+export default function BlogTagsPostsPage(props: Props): ReactNode {
   return (
     <HtmlClassNameProvider
       className={clsx(

packages/docusaurus-theme-classic/src/theme/CodeBlock/Container/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {type ComponentProps} from 'react';
+import React, {type ComponentProps, type ReactNode} from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames, usePrismTheme} from '@docusaurus/theme-common';
 import {getPrismCssVariables} from '@docusaurus/theme-common/internal';
@@ -14,7 +14,7 @@ import styles from './styles.module.css';
 export default function CodeBlockContainer<T extends 'div' | 'pre'>({
   as: As,
   ...props
-}: {as: T} & ComponentProps<T>): JSX.Element {
+}: {as: T} & ComponentProps<T>): ReactNode {
   const prismTheme = usePrismTheme();
   const prismCssVariables = getPrismCssVariables(prismTheme);
   return (

packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/Element.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 Container from '@theme/CodeBlock/Container';
 import type {Props} from '@theme/CodeBlock/Content/Element';
@@ -15,10 +15,7 @@ import styles from './styles.module.css';
 // <pre> tags in markdown map to CodeBlocks. They may contain JSX children. When
 // the children is not a simple string, we just return a styled block without
 // actually highlighting.
-export default function CodeBlockJSX({
-  children,
-  className,
-}: Props): JSX.Element {
+export default function CodeBlockJSX({children, className}: Props): ReactNode {
   return (
     <Container
       as="pre"

packages/docusaurus-theme-classic/src/theme/CodeBlock/Content/String.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 {useThemeConfig, usePrismTheme} from '@docusaurus/theme-common';
 import {
@@ -38,7 +38,7 @@ export default function CodeBlockString({
   title: titleProp,
   showLineNumbers: showLineNumbersProp,
   language: languageProp,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const {
     prism: {defaultLanguage, magicComments},
   } = useThemeConfig();

packages/docusaurus-theme-classic/src/theme/CodeBlock/CopyButton/index.tsx

@@ -5,7 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, {useCallback, useState, useRef, useEffect} from 'react';
+import React, {
+  useCallback,
+  useState,
+  useRef,
+  useEffect,
+  type ReactNode,
+} from 'react';
 import clsx from 'clsx';
 import copy from 'copy-text-to-clipboard';
 import {translate} from '@docusaurus/Translate';
@@ -15,7 +21,7 @@ import IconSuccess from '@theme/Icon/Success';
 
 import styles from './styles.module.css';
 
-export default function CopyButton({code, className}: Props): JSX.Element {
+export default function CopyButton({code, className}: Props): ReactNode {
   const [isCopied, setIsCopied] = useState(false);
   const copyTimeout = useRef<number | undefined>(undefined);
   const handleCopyCode = useCallback(() => {

packages/docusaurus-theme-classic/src/theme/CodeBlock/Line/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 type {Props} from '@theme/CodeBlock/Line';
 
@@ -17,7 +17,7 @@ export default function CodeBlockLine({
   showLineNumbers,
   getLineProps,
   getTokenProps,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   if (line.length === 1 && line[0]!.content === '\n') {
     line[0]!.content = '';
   }

packages/docusaurus-theme-classic/src/theme/CodeBlock/WordWrapButton/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 {translate} from '@docusaurus/Translate';
 import type {Props} from '@theme/CodeBlock/WordWrapButton';
@@ -17,7 +17,7 @@ export default function WordWrapButton({
   className,
   onClick,
   isEnabled,
-}: Props): JSX.Element | null {
+}: Props): ReactNode {
   const title = translate({
     id: 'theme.CodeBlock.wordWrapToggle',
     message: 'Toggle word wrap',

packages/docusaurus-theme-classic/src/theme/CodeBlock/index.tsx

@@ -28,7 +28,7 @@ function maybeStringifyChildren(children: ReactNode): ReactNode {
 export default function CodeBlock({
   children: rawChildren,
   ...props
-}: Props): JSX.Element {
+}: Props): ReactNode {
   // The Prism theme on SSR is always the default theme but the site theme can
   // be in a different mode. React hydration doesn't update DOM styles that come
   // from SSR. Hence force a re-render after mounting to apply the current

packages/docusaurus-theme-classic/src/theme/CodeInline/index.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/CodeInline';
 
 // Simple component used to render inline code blocks
 // its purpose is to be swizzled and customized
 // MDX 1 used to have a inlineCode comp, see https://mdxjs.com/migrating/v2/
-export default function CodeInline(props: Props): JSX.Element {
+export default function CodeInline(props: Props): ReactNode {
   return <code {...props} />;
 }

packages/docusaurus-theme-classic/src/theme/ColorModeToggle/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 useIsBrowser from '@docusaurus/useIsBrowser';
 import {translate} from '@docusaurus/Translate';
@@ -20,7 +20,7 @@ function ColorModeToggle({
   buttonClassName,
   value,
   onChange,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const isBrowser = useIsBrowser();
 
   const title = translate(

packages/docusaurus-theme-classic/src/theme/ContentVisibility/Draft/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 {
   ThemeClassNames,
@@ -15,7 +15,7 @@ import {
 import Admonition from '@theme/Admonition';
 import type {Props} from '@theme/ContentVisibility/Draft';
 
-export default function Draft({className}: Props): JSX.Element | null {
+export default function Draft({className}: Props): ReactNode {
   return (
     <Admonition
       type="caution"

packages/docusaurus-theme-classic/src/theme/ContentVisibility/Unlisted/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 {
   ThemeClassNames,
@@ -27,7 +27,7 @@ function UnlistedBanner({className}: Props) {
   );
 }
 
-export default function Unlisted(props: Props): JSX.Element | null {
+export default function Unlisted(props: Props): ReactNode {
   return (
     <>
       {/*

packages/docusaurus-theme-classic/src/theme/ContentVisibility/index.tsx

@@ -5,15 +5,13 @@
  * 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/ContentVisibility';
 import Draft from '@theme/ContentVisibility/Draft';
 import Unlisted from '@theme/ContentVisibility/Unlisted';
 
-export default function ContentVisibility({
-  metadata,
-}: Props): JSX.Element | null {
+export default function ContentVisibility({metadata}: Props): ReactNode {
   const {unlisted, frontMatter} = metadata;
   // Reading draft/unlisted status from frontMatter is useful to display
   // the banners in dev mode (in dev, metadata.unlisted is always false)

packages/docusaurus-theme-classic/src/theme/Details/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 {Details as DetailsGeneric} from '@docusaurus/theme-common/Details';
 import type {Props} from '@theme/Details';
@@ -16,7 +16,7 @@ import styles from './styles.module.css';
 // alert classes?
 const InfimaClasses = 'alert alert--info';
 
-export default function Details({...props}: Props): JSX.Element {
+export default function Details({...props}: Props): ReactNode {
   return (
     <DetailsGeneric
       {...props}

packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/Items/Home/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 Link from '@docusaurus/Link';
 import useBaseUrl from '@docusaurus/useBaseUrl';
 import {translate} from '@docusaurus/Translate';
@@ -13,7 +13,7 @@ import IconHome from '@theme/Icon/Home';
 
 import styles from './styles.module.css';
 
-export default function HomeBreadcrumbItem(): JSX.Element {
+export default function HomeBreadcrumbItem(): ReactNode {
   const homeHref = useBaseUrl('/');
 
   return (

packages/docusaurus-theme-classic/src/theme/DocBreadcrumbs/index.tsx

@@ -25,7 +25,7 @@ function BreadcrumbsItemLink({
   children: ReactNode;
   href: string | undefined;
   isLast: boolean;
-}): JSX.Element {
+}): ReactNode {
   const className = 'breadcrumbs__link';
   if (isLast) {
     return (
@@ -59,7 +59,7 @@ function BreadcrumbsItem({
   active?: boolean;
   index: number;
   addMicrodata: boolean;
-}): JSX.Element {
+}): ReactNode {
   return (
     <li
       {...(addMicrodata && {
@@ -76,7 +76,7 @@ function BreadcrumbsItem({
   );
 }
 
-export default function DocBreadcrumbs(): JSX.Element | null {
+export default function DocBreadcrumbs(): ReactNode {
   const breadcrumbs = useSidebarBreadcrumbs();
   const homePageRoute = useHomePageRoute();
 

packages/docusaurus-theme-classic/src/theme/DocCard/index.tsx

@@ -48,7 +48,7 @@ function CardContainer({
 }: {
   href: string;
   children: ReactNode;
-}): JSX.Element {
+}): ReactNode {
   return (
     <Link
       href={href}
@@ -68,7 +68,7 @@ function CardLayout({
   icon: ReactNode;
   title: string;
   description?: string;
-}): JSX.Element {
+}): ReactNode {
   return (
     <CardContainer href={href}>
       <Heading
@@ -88,11 +88,7 @@ function CardLayout({
   );
 }
 
-function CardCategory({
-  item,
-}: {
-  item: PropSidebarItemCategory;
-}): JSX.Element | null {
+function CardCategory({item}: {item: PropSidebarItemCategory}): ReactNode {
   const href = findFirstSidebarItemLink(item);
   const categoryItemsPlural = useCategoryItemsPlural();
 
@@ -111,7 +107,7 @@ function CardCategory({
   );
 }
 
-function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
+function CardLink({item}: {item: PropSidebarItemLink}): ReactNode {
   const icon = isInternalUrl(item.href) ? '📄️' : '🔗';
   const doc = useDocById(item.docId ?? undefined);
   return (
@@ -124,7 +120,7 @@ function CardLink({item}: {item: PropSidebarItemLink}): JSX.Element {
   );
 }
 
-export default function DocCard({item}: Props): JSX.Element {
+export default function DocCard({item}: Props): ReactNode {
   switch (item.type) {
     case 'link':
       return <CardLink item={item} />;

packages/docusaurus-theme-classic/src/theme/DocCardList/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 {
   useCurrentSidebarCategory,
@@ -19,7 +19,7 @@ function DocCardListForCurrentSidebarCategory({className}: Props) {
   return <DocCardList items={category.items} className={className} />;
 }
 
-export default function DocCardList(props: Props): JSX.Element {
+export default function DocCardList(props: Props): ReactNode {
   const {items, className} = props;
   if (!items) {
     return <DocCardListForCurrentSidebarCategory {...props} />;

packages/docusaurus-theme-classic/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 {PageMetadata} from '@docusaurus/theme-common';
 import {useCurrentSidebarCategory} from '@docusaurus/plugin-content-docs/client';
 import useBaseUrl from '@docusaurus/useBaseUrl';
@@ -21,7 +21,7 @@ import styles from './styles.module.css';
 
 function DocCategoryGeneratedIndexPageMetadata({
   categoryGeneratedIndex,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   return (
     <PageMetadata
       title={categoryGeneratedIndex.title}
@@ -35,7 +35,7 @@ function DocCategoryGeneratedIndexPageMetadata({
 
 function DocCategoryGeneratedIndexPageContent({
   categoryGeneratedIndex,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const category = useCurrentSidebarCategory();
   return (
     <div className={styles.generatedIndexPage}>
@@ -63,9 +63,7 @@ function DocCategoryGeneratedIndexPageContent({
   );
 }
 
-export default function DocCategoryGeneratedIndexPage(
-  props: Props,
-): JSX.Element {
+export default function DocCategoryGeneratedIndexPage(props: Props): ReactNode {
   return (
     <>
       <DocCategoryGeneratedIndexPageMetadata {...props} />

packages/docusaurus-theme-classic/src/theme/DocItem/Content/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -33,7 +33,7 @@ function useSyntheticTitle(): string | null {
   return metadata.title;
 }
 
-export default function DocItemContent({children}: Props): JSX.Element {
+export default function DocItemContent({children}: Props): ReactNode {
   const syntheticTitle = useSyntheticTitle();
   return (
     <div className={clsx(ThemeClassNames.docs.docMarkdown, 'markdown')}>

packages/docusaurus-theme-classic/src/theme/DocItem/Footer/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -13,7 +13,7 @@ import TagsListInline from '@theme/TagsListInline';
 
 import EditMetaRow from '@theme/EditMetaRow';
 
-export default function DocItemFooter(): JSX.Element | null {
+export default function DocItemFooter(): ReactNode {
   const {metadata} = useDoc();
   const {editUrl, lastUpdatedAt, lastUpdatedBy, tags} = metadata;
 

packages/docusaurus-theme-classic/src/theme/DocItem/Layout/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 {useWindowSize} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -46,7 +46,7 @@ function useDocTOC() {
   };
 }
 
-export default function DocItemLayout({children}: Props): JSX.Element {
+export default function DocItemLayout({children}: Props): ReactNode {
   const docTOC = useDocTOC();
   const {metadata} = useDoc();
   return (

packages/docusaurus-theme-classic/src/theme/DocItem/Metadata/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 {PageMetadata} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 
-export default function DocItemMetadata(): JSX.Element {
+export default function DocItemMetadata(): ReactNode {
   const {metadata, frontMatter, assets} = useDoc();
   return (
     <PageMetadata

packages/docusaurus-theme-classic/src/theme/DocItem/Paginator/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 {useDoc} from '@docusaurus/plugin-content-docs/client';
 import DocPaginator from '@theme/DocPaginator';
 
@@ -13,7 +13,7 @@ import DocPaginator from '@theme/DocPaginator';
  * This extra component is needed, because <DocPaginator> should remain generic.
  * DocPaginator is used in non-docs contexts too: generated-index pages...
  */
-export default function DocItemPaginator(): JSX.Element {
+export default function DocItemPaginator(): ReactNode {
   const {metadata} = useDoc();
   return <DocPaginator previous={metadata.previous} next={metadata.next} />;
 }

packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Desktop/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
 
 import TOC from '@theme/TOC';
 
-export default function DocItemTOCDesktop(): JSX.Element {
+export default function DocItemTOCDesktop(): ReactNode {
   const {toc, frontMatter} = useDoc();
   return (
     <TOC

packages/docusaurus-theme-classic/src/theme/DocItem/TOC/Mobile/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 {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
@@ -14,7 +14,7 @@ import TOCCollapsible from '@theme/TOCCollapsible';
 
 import styles from './styles.module.css';
 
-export default function DocItemTOCMobile(): JSX.Element {
+export default function DocItemTOCMobile(): ReactNode {
   const {toc, frontMatter} = useDoc();
   return (
     <TOCCollapsible

packages/docusaurus-theme-classic/src/theme/DocItem/index.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 {HtmlClassNameProvider} from '@docusaurus/theme-common';
 import {DocProvider} from '@docusaurus/plugin-content-docs/client';
 import DocItemMetadata from '@theme/DocItem/Metadata';
 import DocItemLayout from '@theme/DocItem/Layout';
 import type {Props} from '@theme/DocItem';
 
-export default function DocItem(props: Props): JSX.Element {
+export default function DocItem(props: Props): ReactNode {
   const docHtmlClassName = `docs-doc-id-${props.content.metadata.id}`;
   const MDXComponent = props.content;
   return (

packages/docusaurus-theme-classic/src/theme/DocPaginator/index.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 Translate, {translate} from '@docusaurus/Translate';
 import PaginatorNavLink from '@theme/PaginatorNavLink';
 import type {Props} from '@theme/DocPaginator';
 
-export default function DocPaginator(props: Props): JSX.Element {
+export default function DocPaginator(props: Props): ReactNode {
   const {previous, next} = props;
   return (
     <nav

packages/docusaurus-theme-classic/src/theme/DocRoot/Layout/Main/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 {useDocsSidebar} from '@docusaurus/plugin-content-docs/client';
 import type {Props} from '@theme/DocRoot/Layout/Main';
@@ -15,7 +15,7 @@ import styles from './styles.module.css';
 export default function DocRootLayoutMain({
   hiddenSidebarContainer,
   children,
-}: Props): JSX.Element {
+}: Props): ReactNode {
   const sidebar = useDocsSidebar();
   return (
     <main