Sentry Answers>Next.js>

TypeError: React.createContext is not a function (Next.js 13 and Formik with Typescript)

TypeError: React.createContext is not a function (Next.js 13 and Formik with Typescript)

Matthew C.

—

The Problem

When using the React form library Formik in a Next.js application with the App Router, you may encounter the following error:

Click to Copy
TypeError: (0 , react__WEBPACK_IMPORTED_MODULE_1__.createContext) is not a function

The following example form component causes this error:

Click to Copy
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 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.

Add the React "use client" directive at the top of your component file, above your imports:

Click to Copy
"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 like this:

Click to Copy
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.

  • Sentry BlogCommon Errors in Next.js and How to Resolve Them
  • Community SeriesDebug Next.js with Sentry
  • ResourcesJavaScript Frontend Error Monitoring 101
  • Syntax.fmListen to the Syntax Podcast
  • Syntax.fm logo
    Listen to the Syntax Podcast

    Tasty treats for web developers brought to you by Sentry. Get tips and tricks from Wes Bos and Scott Tolinski.

    SEE EPISODES

Considered “not bad” by 4 million developers and more than 100,000 organizations worldwide, Sentry provides code-level observability to many of the world’s best-known companies like Disney, Peloton, Cloudflare, Eventbrite, Slack, Supercell, and Rockstar Games. Each month we process billions of exceptions from the most popular products on the internet.

learn more about sentryjoin our discord
© 2025 • Sentry is a registered Trademark of Functional Software, Inc.