# TypeError: React.createContext is not a function

> The creation of the React Context is the source of the error message. Learn to resolve this issue in a few simple steps.

**URL:** https://sentry.io/answers/typeerror-react-createcontext-is-not-a-function-nextjs-13-formik-with-typescript/

---

## The Problem

When using the React form library [Formik](https://formik.org/) in a Next.js application with the [App Router](https://nextjs.org/docs/app), you may encounter the following error:

```
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function
```

The following example form component causes this error:

```tsx
import { Field, Form, Formik } from "formik";

export default function LoginForm() {
  return (
    <Formik
      initialValues={{ email: "" }}
      onSubmit={(values, { setSubmitting }) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          setSubmitting(false);
        }, 400);
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <Field type="email" name="email" />
          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  );
}
```

## The Solution

The creation of the React Context is the source of the error message because pages and components in the Next.js App Router are [React Server Components](https://nextjs.org/docs/app/getting-started/server-and-client-components) by default. Server Components are pre-rendered into HTML on the server before being sent to the client and don't support creating or consuming context directly.

To use React Context in a Next.js application with the App Router, make your component a [Client Component](https://nextjs.org/docs/app/getting-started/server-and-client-components).

Add the React [`"use client"`](https://react.dev/reference/rsc/use-client) directive at the top of your component file, above your imports:

```typescript
"use client";
```

This wraps the third-party Formik components, which rely on client-only features, in your own custom Client Component.

Formik components, such as `<Field />`, use React Context to access the state and methods of the parent `<Formik />` component.

The `<Formik />` component creates a context and renders a [React Context Provider](https://react.dev/learn/passing-data-deeply-with-context#step-3-provide-the-context) like this:

```tsx
const FormikContext = React.createContext({});

export const Formik = ({ children, ...props }) => {
  const formikStateAndHelpers = useFormik(props);
  return (
    <FormikContext.Provider value={formikStateAndHelpers}>
      {typeof children === "function"
        ? children(formikStateAndHelpers)
        : children}
    </FormikContext.Provider>
  );
};
```

React Server Components are a new React feature. Not all libraries would have the `"use client"` directive added to their components that use client-only features like `useState`, `useEffect`, and `createContext`. You need to add the directive yourself for some libraries.

---

*Source: [sentry.io/answers/typeerror-react-createcontext-is-not-a-function-nextjs-13-formik-with-typescript/](https://sentry.io/answers/typeerror-react-createcontext-is-not-a-function-nextjs-13-formik-with-typescript/)*