React项目启动出现Element type is invalid错误，请求解决方案（附代码）

我看到你在Formik结合Material UI开发时遇到了这个棘手的组件类型错误，结合错误提示和你的代码，我梳理了几个核心原因和对应的解决方案：

1. JS文件中混用TypeScript语法导致组件解析失败 #

你的App.js文件里写了大量TypeScript专属语法（比如type MyRadioProps类型定义、React.FC<MyRadioProps>泛型声明），但文件后缀是.js——普通JS文件不支持TS语法，编译器无法正确解析这些代码，最终导致组件被错误识别为object，而非有效的函数组件。

解决方案：

• 最直接的方式：将App.js重命名为App.tsx，同时确保项目的tsconfig.json配置正确，支持TSX文件编译。
• 如果不想使用TypeScript：移除所有TS相关语法，比如：
  • 删除type MyRadioProps = { label: string } & FieldAttributes<{}>类型定义
  • 将const MyRadio: React.FC<MyRadioProps>改为const MyRadio =
  • 移除泛型标记，比如useField<{}>(props)改为useField(props)

2. 清理Field组件的冗余属性 #

在使用Formik的Field组件结合Material UI组件时，你添加了多余的type属性，虽然这不会直接引发组件类型错误，但可能干扰组件的正常渲染逻辑：

// 错误写法
<Field placeholder="last name" name="lastName" type="input" as={TextField} />
// 正确写法
<Field placeholder="last name" name="lastName" as={TextField} />

3. 优化Radio组件的属性传递 #

虽然这不是当前错误的直接原因，但你的MyRadio组件可以优化属性传递逻辑，避免后续单选框选中异常：

const MyRadio = ({ label, ...props }) => {
  const [field] = useField(props);
  // 明确给Radio传递checked和onChange属性，确保选中状态正常
  return <FormControlLabel control={<Radio checked={field.checked} onChange={field.onChange} />} label={label} />;
};

快速验证步骤 #

先尝试把App.js重命名为App.tsx，然后重启开发服务器——这大概率能解决你的问题，因为JS文件中的TS语法是导致组件被识别为object的最可能原因。

内容的提问来源于stack exchange，提问作者Ivan Anisimov