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"]
}