With React 19 typings: Cannot find namespace 'JSX'.

[Philipp91]

Bug report

Current Behavior

I use the latest formik release with React v19, specifically "@types/react": "^19.0.1" and I get 4 errors like:

node_modules/formik/dist/types.d.ts:209:109 - error TS2503: Cannot find namespace 'JSX'.

209 export type GenericFieldHTMLAttributes = JSX.IntrinsicElements['input'] | JSX.IntrinsicElements['select'] | JSX.IntrinsicElements['textarea'];

Expected behavior

No type errors.

Suggested solution(s)

s/JSX/React.JSX

Additional context

https://react.dev/blog/2024/04/25/react-19-upgrade-guide#the-jsx-namespace-in-typescript

It's only about typings anyway. In @react/types, this was backported also to the v16 series, so the proposed change doesn't require React v19 to work.

Your environment

Software	Version(s)
Formik	2.4.6
React	19.0.0
TypeScript	5.5.4
npm/Yarn	npm 10.9.0
Operating System	Kubuntu

[FathZulfaAli]

How did you install it ? I have peer problem while installing formik in react19 / nextjs15 Pretty much I have same environment as you have

[Philipp91]

  "dependencies": {
    "formik": "^2.4.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    ...
  },
  "devDependencies": {
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    ...
  },

Then npm install is happy to install exactly those versions that I asked for without complaints or warnings.

[FathZulfaAli]

  "dependencies": {
    "formik": "^2.4.6",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    ...
  },
  "devDependencies": {
    "@types/react": "^19.0.1",
    "@types/react-dom": "^19.0.1",
    ...
  },

Then npm install is happy to install exactly those versions that I asked for without complaints or warnings.

Lovely, thanks man,

Anyway I have another solution to overrides it with react

 "overrides": {
    "formik": {
      "react": "19.0.0-rc-66855b96-20241106",
      "react-dom": "19.0.0-rc-66855b96-20241106"
    }
  }

[tva1992]

Same issue for me

[escapedcat]

Replacing JSX with React.JSX worked for me in another project

[vollmerr]

I was able to fix this for now by adding a global.d.ts with

declare global {
  namespace JSX {
    interface IntrinsicElements extends React.JSX.IntrinsicElements {}
  }
}

export {};