TypeError：React.createContext 不是一个函数（Nextjs 13 和 Formik 与 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

在

use client

和

MyApp

组件的第一行使用

Home

。因为next13使用客户端和服务器组件。

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

Answer 3

使用新的App Directory，React 组件分为两类：服务器组件和客户端组件，默认情况下它们都是服务器组件，如下所述：https://nextjs.org/docs/app/building-your -应用程序/渲染/服务器组件#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';
// ...rest of the code

Answer 4

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

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

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

Answer 5

我从材质图标导入图标，但收到此错误。我只是在标题组件的顶部使用

'use client'

。

这是代码：

'use client';

import React from 'react'
import Image from 'next/image'
import SearchRoundedIcon from '@mui/icons-material/SearchRounded';

function Header() {
  return (
    <header>
        {/* topNav */}
        <div className='flex items-center bg-amazon_blue p-4 flex-grow pb-1'>
            <div className="mt-2 flex items-center flex-grow sm:flex-grow-0">
                <Image 
                src="https://links.papareact.com/f90"
                width={100}
                height={50}
                priority
                />
            </div>
            {/* Search */}
           <div>
            <input type="text"/>
            <SearchRoundedIcon/>
           </div>
        </div>
        {/* bottomNav */}
        <div></div>
    </header>
  )
}

export default Header

Answer 6

将“使用客户端”添加到组件顶部，使其基于客户端。 不，它不是..但知道任何时候你使用需要客户端输入的东西或任何需要直接在客户端运行的东西，比如一些用于动作的库，那么你总是需要将你的组件包装为客户端