Cannot find namespace 'JSX' type error with newest version of Prismic

Developing with Prismic
,
4

Edit: This can be fixed by updating to the latest versions of @slicemachine/adapter-next, @prismicio/react, and @prismicio/next:

npm install --save-dev @slicemachine/adapter-next@latest
npm install --save @prismicio/react@latest @prismicio/next@latest

In existing slices, import JSX from react:

import { JSX } from "react";

Example:

import { JSX } from "react";
import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";

/**
 * Props for `Image`.
 */
export type ImageProps = SliceComponentProps<Content.ImageSlice>;

/**
 * Component for "Image" Slices.
 */
const Image = ({ slice }: ImageProps): JSX.Element => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      Placeholder component for image (variation: {slice.variation}) Slices
    </section>
  );
};

export default Image;
See the original reply

Thanks for the report. We have a fix in progress (see: fix(adapter-next): support React 19's updated TypeScript types by angeloashmore · Pull Request #1545 · prismicio/slice-machine · GitHub).

Until we publish the update, you can fix the error in your code with the following fix:

Workaround

Import JSX from React at the top of the component:

import { JSX } from "react";

Example

import { JSX } from "react";
import { Content } from "@prismicio/client";
import { SliceComponentProps } from "@prismicio/react";

/**
 * Props for `Image`.
 */
export type ImageProps = SliceComponentProps<Content.ImageSlice>;

/**
 * Component for "Image" Slices.
 */
const Image = ({ slice }: ImageProps): JSX.Element => {
  return (
    <section
      data-slice-type={slice.slice_type}
      data-slice-variation={slice.variation}
    >
      Placeholder component for image (variation: {slice.variation}) Slices
    </section>
  );
};

export default Image;