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

Matthew C.

—June 15, 2024

The ProblemThe Problem

When using the React form library Formik in a Next.js application with the App Router, 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:

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 SolutionThe 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:

"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:

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.