fix: use React 18 and 19 compatible types (#217)

examples/custom-slicezone-props/index.tsx

@@ -108,6 +108,6 @@ const components: Record<string, SliceComponentType> = {
 
 // We render the Slice Zone using the `<SliceZone>` component by passing the
 // list of Slices and component map.
-export const App = (): JSX.Element => {
+export const App = (): React.JSX.Element => {
 	return <SliceZone slices={slices} components={components} />;
 };

examples/router-link/index.tsx

@@ -17,7 +17,7 @@ const LinkShim = ({ href, ...props }: LinkProps) => {
 
 // We render the Link field using `<PrismicLink>`. Since the field contains an
 // internal URL, react-router-dom's `<Link>` component will render.
-export const App = (): JSX.Element => {
+export const App = (): React.JSX.Element => {
 	return (
 		<main>
 			<PrismicLink field={field} internalComponent={LinkShim} />

examples/with-global-configuration/index.tsx

@@ -65,7 +65,7 @@ const MyComponent = () => {
 // `<PrismicProvider>`. We pass global Prismic configuration to the provider at
 // this level. By doing so, it becomes available automatically to all Prismic
 // components lower in the tree.
-export const App = (): JSX.Element => {
+export const App = (): React.JSX.Element => {
 	return (
 		<PrismicProvider
 			internalLinkComponent={LinkShim}

examples/with-typescript/index.tsx

@@ -56,19 +56,19 @@ declare const page: PageDocument;
 // correct fields are passed.
 
 // Rendering a Rich Text or Title looks like this.
-export const WithRichText = (): JSX.Element => {
+export const WithRichText = (): React.JSX.Element => {
 	return <PrismicRichText field={page.data.title} />;
 };
 
 // Rendering a link to a document looks like this.
-export const WithDocumentLink = (): JSX.Element => {
+export const WithDocumentLink = (): React.JSX.Element => {
 	return <PrismicLink document={page} />;
 };
 
 // Rendering a group looks like this.
 // Using `isFilled.group()` and `isFilled.link()` from `@prismicio/helpers`
 // checks if the fields have a value.
-export const WithGroupFieldLink = (): JSX.Element => {
+export const WithGroupFieldLink = (): React.JSX.Element => {
 	return (
 		<ul>
 			{prismic.isFilled.group(page.data.related_links) &&
@@ -93,7 +93,7 @@ export const WithGroupFieldLink = (): JSX.Element => {
 // Rendering a Slice Zone looks like this.
 // Note that the `components` object is typed to ensure a component is given
 // for each Slice type.
-export const WithSliceZone = (): JSX.Element => {
+export const WithSliceZone = (): React.JSX.Element => {
 	return (
 		<SliceZone
 			slices={page.data.slices}

src/PrismicImage.tsx

@@ -114,7 +114,7 @@ export const PrismicImage = React.forwardRef(function PrismicImage(
 		...restProps
 	}: PrismicImageProps,
 	ref: React.ForwardedRef<HTMLImageElement>,
-): JSX.Element | null {
+): React.JSX.Element | null {
 	if (
 		typeof process !== "undefined" &&
 		process.env.NODE_ENV === "development"

src/PrismicLink.tsx

@@ -38,4 +38,4 @@ export const PrismicLink = React.forwardRef(function PrismicLink<
 	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
 		ref?: React.ForwardedRef<Element>;
 	},
-) => JSX.Element;
+) => React.JSX.Element;

src/PrismicProvider.tsx

@@ -108,7 +108,7 @@ export const PrismicProvider = <
 	internalLinkComponent,
 	externalLinkComponent,
 	children,
-}: PrismicProviderProps<LinkResolverFunction>): JSX.Element => {
+}: PrismicProviderProps<LinkResolverFunction>): React.JSX.Element => {
 	const value = React.useMemo<PrismicContextValue<LinkResolverFunction>>(
 		() => ({
 			client,

src/PrismicText.tsx

@@ -43,7 +43,9 @@ export type PrismicTextProps = {
  *
  * @see Learn about Rich Text fields {@link https://prismic.io/docs/core-concepts/rich-text-title}
  */
-export const PrismicText = (props: PrismicTextProps): JSX.Element | null => {
+export const PrismicText = (
+	props: PrismicTextProps,
+): React.JSX.Element | null => {
 	if (
 		typeof process !== "undefined" &&
 		process.env.NODE_ENV === "development"

src/SliceZone.tsx

@@ -251,7 +251,7 @@ export const TODOSliceComponent = <TSlice extends SliceLike>({
 	slice,
 }: {
 	slice: TSlice;
-}): JSX.Element | null => {
+}): React.JSX.Element | null => {
 	if (
 		typeof process !== "undefined" &&
 		process.env.NODE_ENV === "development"

src/react-server/PrismicLink.tsx

@@ -108,7 +108,7 @@ export const PrismicLink = React.forwardRef(function PrismicLink<
 >(
 	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps>,
 	ref: React.ForwardedRef<Element>,
-): JSX.Element {
+): React.JSX.Element {
 	const {
 		field,
 		document: doc,
@@ -194,4 +194,4 @@ export const PrismicLink = React.forwardRef(function PrismicLink<
 	props: PrismicLinkProps<InternalComponentProps, ExternalComponentProps> & {
 		ref?: React.ForwardedRef<Element>;
 	},
-) => JSX.Element;
+) => React.JSX.Element;

src/react-server/PrismicRichText.tsx

@@ -267,7 +267,7 @@ export function PrismicRichText<
 	externalLinkComponent,
 	internalLinkComponent,
 	...restProps
-}: PrismicRichTextProps<LinkResolverFunction>): JSX.Element | null {
+}: PrismicRichTextProps<LinkResolverFunction>): React.JSX.Element | null {
 	return React.useMemo(() => {
 		if (
 			typeof process !== "undefined" &&
@@ -298,7 +298,7 @@ export function PrismicRichText<
 			// The serializer is wrapped in a higher-order function
 			// that automatically applies a key to React Elements
 			// if one is not already given.
-			const serialized = prismicR.serialize<JSX.Element>(
+			const serialized = prismicR.serialize<React.JSX.Element>(
 				field,
 				(type, node, text, children, key) => {
 					const result = serializer(type, node, text, children, key);

src/react-server/unsupported.ts

@@ -11,7 +11,7 @@ function buildIncompatibleQueryHookInServerComponentsErrorMessage(
 	return `${fnName} is not supported in Server Components. Replace ${fnName} in Server Components with direct use of \`@prismicio/client\` (recommended) or add the "use client" directive to the component using the hook.`;
 }
 
-export function PrismicProvider(): JSX.Element {
+export function PrismicProvider(): React.JSX.Element {
 	throw new Error(
 		buildIncompatibleInServerComponentsErrorMessage("<PrismicProvider>"),
 	);

src/types.ts

@@ -7,15 +7,16 @@ import * as prismicR from "@prismicio/richtext";
  * @see Templating rich text and title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
  */
 export type JSXFunctionSerializer =
-	prismicR.RichTextFunctionSerializer<JSX.Element>;
+	prismicR.RichTextFunctionSerializer<React.JSX.Element>;
 
 /**
  * A map of Rich Text block types to React Components. It is used to render Rich
  * Text or Title fields.
  *
  * @see Templating Rich Text and Title fields from Prismic {@link https://prismic.io/docs/technologies/templating-rich-text-and-title-fields-javascript}
  */
-export type JSXMapSerializer = prismicR.RichTextMapSerializer<JSX.Element>;
+export type JSXMapSerializer =
+	prismicR.RichTextMapSerializer<React.JSX.Element>;
 
 /**
  * States of a `@prismicio/client` hook.

test/SliceZone.test.tsx

@@ -24,7 +24,7 @@ const StringifySliceComponent = ({
 	slices,
 	context,
 	...restProps
-}: StringifySliceComponentProps): JSX.Element => (
+}: StringifySliceComponentProps): React.JSX.Element => (
 	<div data-id={id}>
 		<div data-slice={JSON.stringify(slice)} />
 		<div data-index={index} />