Namespace 'React' has no exported member 'StatelessComponent'.

[alaanescobedo]

Bug report

The StatelessComponent type was removed in react update 18 - https://github.com/DefinitelyTyped/DefinitelyTyped/pull/56210

Current Behavior

Error when building app : node_modules/formik/dist/withFormik.d.ts(58,77): error TS2694: Namespace 'React' has no exported member 'StatelessComponent'.

Expected behavior

Build without errors.

Reproducible example

Following the formik documentation - https://formik.org/docs/guides/typescript https://codesandbox.io/s/hardcore-bhabha-kobk3m?file=/src/MyForm.tsx Deploy sandbox to preview

Suggested solution(s)

I don't know how to replicate it in codesandbox, but in a local environment in node_modules/formik/dist/withFormik.d.ts on line 58 replace React.StatelessComponent<P> by React.FunctionComponent<P>

Your environment

Software	Version(s)
Formik	2.2.9
React	18.0.0
TypeScript	4.6.3
Browser	Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36
npm/Yarn	yarn
Operating System	Windows

[maximeg]

In a fixes.d.ts I added

/*
 * Namespace 'React' has no exported member 'StatelessComponent'
 * in formik, react-mapbox-gl
 */
declare namespace React {
  type StatelessComponent<P> = React.FunctionComponent<P>;
}

[timmaloshtan]

@maximeg Where did you put the file fixes.d.ts?

[johnrom]

@timmaloshtan you can declare your own fixes anywhere, but these patches are often placed outside of src, like:

/your-project
  /src
    /your-form.tsx
  /types
    /fixes.d.ts

Then, you would modify your tsconfig.json:

{
  "include": ["src", "types"],
}

This helps you keep the patches outside of your source codebase so you can examine them often.

You can read more here: https://www.typescriptlang.org/docs/handbook/declaration-files/by-example.html

removed typeRoots info because it's not relevant here

[bennycode]

In my app I created the file src/@types/index.d.ts with the following content to have a workaround (thanks to @maximeg):

// Fixes TS2694
declare global {
  namespace React {
    /** Fixes React 18 compatibility issues with formik: https://github.com/jaredpalmer/formik/issues/3546#issuecomment-1127014775 */
    type StatelessComponent<P> = React.FunctionComponent<P>;
  }
}

// Fixes TS2669
export {};