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

Developing with Prismic
,
1

It looks like in @types/react , the global JSX namespace has been deprecated.

Because of this all of the slices automatically generated by the slicemachine are returning Cannot find namespace 'JSX'.ts(2503) because all of their return types are JSX.Element

This is an example of a component with the error:

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

/**
 * Props for `Contact`.
 */
export type ContactProps = SliceComponentProps<Content.ContactSlice>;

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

export default Contact;

If I change JSX.Element to React.JSX.Element the type error goes away.

package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev --turbopack",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "slicemachine": "start-slicemachine"
  },
  "dependencies": {
    "@prismicio/client": "^7.15.1",
    "@prismicio/next": "^1.7.1",
    "@prismicio/react": "^2.9.1",
    "next": "15.1.5",
    "react": "^19.0.0",
    "react-dom": "^19.0.0"
  },
  "devDependencies": {
    "@eslint/eslintrc": "^3",
    "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
    "@slicemachine/adapter-next": "^0.3.64",
    "@types/node": "^20",
    "@types/react": "^19.0.7",
    "@types/react-dom": "^19",
    "eslint": "^9",
    "eslint-config-next": "15.1.5",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "prettier-plugin-tailwindcss": "^0.6.10",
    "slice-machine-ui": "^2.12.2",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  }
}

This is my tsconfig.json file for reference:

{
	"compilerOptions": {
		"target": "ES2017",
		"lib": ["dom", "dom.iterable", "esnext"],
		"allowJs": true,
		"skipLibCheck": true,
		"strict": true,
		"noEmit": true,
		"esModuleInterop": true,
		"module": "esnext",
		"moduleResolution": "bundler",
		"resolveJsonModule": true,
		"isolatedModules": true,
		"jsx": "preserve",
		"incremental": true,
		"plugins": [
			{
				"name": "next"
			}
		],
		"paths": {
			"@/*": ["./src/*"]
		}
	},
	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
	"exclude": ["node_modules"]
}
2

I had the same error and I fixed it doing what you mentioned which is changing JSX.Element to React.JSX.Element

3

Sounds like a bug with prismic's slice machine.

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;