TypeError：React.createContext 不是一个函数（Nextjs 13 & Formik with Typescript）

Question

我现在尝试使用 Formik 在 NextJs 13 (Typescript) 上创建一个表单。我创建的表单不起作用，然后我尝试添加示例代码片段，Formik如下所示。我创建的表单和 Formik 的示例都仅TypeError: React.createContext is not a function在控制台中返回。(sc_server)/./node_modules/formik/dist/formik.cjs.development.js我可以在另一行控制台错误中看到这一点。

import * as React from 'react';
import {
  Formik,
  FormikHelpers,
  FormikProps,
  Form,
  Field,
  FieldProps,
} from 'formik';

interface MyFormValues {
  firstName: string;
}

export const MyApp: React.FC<{}> = () => {
  const initialValues: MyFormValues = { firstName: '' };
  return (
    <div>
      <h1>My Example</h1>
      <Formik
        initialValues={initialValues}
        onSubmit={(values, actions) => {
          console.log({ values, actions });
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }}
      >
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field id="firstName" name="firstName" placeholder="First Name" />
          <button type="submit">Submit</button>
        </Form>
      </Formik>
    </div>
  );
};

我将上面的组件导入到 /app/page.tsx 中，如下所示。

import { MyApp } from '../components/form/MyApp';

export default function Home() {
  return (
    <div>
      <MyApp />
    </div>
  );
}

Answer 1

我遇到了同样的错误，但使用的是 Material UI 的 DataTable。

DataTable 使用 React Context API，此类 API 仅适用于客户端组件：https://beta.nextjs.org/docs/upgrade-guide#migration-_documentjs-and-_appjs

添加“使用客户端”；页面顶部向我修复了错误。福米克的情况可能就是这样。

Answer 2

在新的App Directory中，React 组件分为两类：服务器组件和客户端组件，默认情况下它们都是服务器组件，如下所述：https://nextjs.org/docs/app/building-your-application/rendering /server-components#using-server-components-in-nextjs。

需要钩子的组件（上下文、使用...，或者像您使用 Formik 的情况）需要被分类为客户端组件，并且在任何导入之前，它们需要在源文件顶部有指令“use client” （https://nextjs.org/docs/app/building-your-application/rendering/client-components#using-client-components-in-nextjs）。

所以你的代码应该是这样的：

'use client';

import * as React from 'react';
import {
  Formik,
  FormikHelpers,
  FormikProps,
  Form,
  Field,
  FieldProps,
} from 'formik';
// ...more code

Answer 3

use client在第一行中使用MyApp和Home组件。因为next13使用客户端和服务器组件。

另请检查此链接https://beta.nextjs.org/docs/rendering/server-and-client-components

Answer 4

我遇到了同样的错误，但是使用 Chakra UI。

ChakraUI 使用 React Context API，此类 API 仅适用于客户端组件：https://beta.nextjs.org/docs/upgrade-guide#migration-_documentjs-and-_appjs

添加“使用客户端”；页面顶部向我修复了错误。福米克的情况可能就是这样。