React组件导入异常求助：type is invalid错误排查

问题描述 #

开发React应用时，尝试将卡片内的表单封装为可复用组件，遇到以下错误：

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

错误位置：Login.jsx:17，调用栈：at Login at div at App at Provider

浏览器仅显示卡片头部，表单元素无法渲染。

问题代码 #

// FormCard.jsx
import { Card } from 'antd'
import React from 'react'

function FormCard({title,bordered, align}) {
 return (
  <Card
    title={title}
    bordered = {bordered}
    align = {align}
    style={{
        width: 300,
      }}
>
</Card>
 )
}
export default FormCard

// Login.jsx
import React from 'react'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import { Button, Checkbox, Form, Input, Row, Col,Card } from 'antd';
import FormCard from '../components/FormCard';

export function Login() {
const onFinish = (values) => {
console.log('Received values of form: ', values);
};
 return (
   <Row gutter={16} justify='center' style={{ marginTop: '30px' }}>
      <Col span={8}>
       <FormCard title="Giriş Yap" bordered={false} align="center">
          <Form
           name="normal_login"
             className="login-form"
           initialValues={{
             remember: true,
            }}
            onFinish={onFinish}
          >
        <Form.Item
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your Username!',
            },
          ]}
        >
          <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
        </Form.Item>
        <Form.Item
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your Password!',
            },
          ]}
        >
          <Input
            prefix={<LockOutlined className="site-form-item-icon" />}
            type="password"
            placeholder="Password"
          />
        </Form.Item>
        <Form.Item>
          <Form.Item name="remember" valuePropName="checked" noStyle>
            <Checkbox>Remember me</Checkbox>
          </Form.Item>

          <a className="login-form-forgot" href="">
            Forgot password
          </a>
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
          Or <a href="">register now!</a>
        </Form.Item>
      </Form>
    </FormCard>
  </Col>
</Row>
);
  };

// App.js
import './App.css';
import {Login} from './pages/Login';
import { Register } from "./pages/Register";


 function App() {
return (
   <div>
     <Login/>
   </div>
);
    };

export default App

错误原因及解决方案 #

• 核心问题：FormCard未处理子组件
  你的FormCard组件没有接收并渲染传入的子元素（即<FormCard>标签内部的表单代码），React无法识别这些未被处理的子内容，因此抛出类型无效的错误。

• 修复代码
  修改FormCard.jsx，添加children参数并在Card组件内渲染：

  import { Card } from 'antd'
  import React from 'react'
  
  function FormCard({title, bordered, align, children}) {
   return (
    <Card
      title={title}
      bordered={bordered}
      align={align}
      style={{
          width: 300,
        }}
    >
      {children} {/* 渲染传入的表单等子组件 */}
    </Card>
   )
  }
  export default FormCard
  

• 额外检查项

  • 确认FormCard的导入路径正确，Login.jsx中的import FormCard from '../components/FormCard';需匹配实际文件位置
  • Login组件的命名导出（export function Login()）和App.js中的命名导入（import {Login} from './pages/Login';）方式一致，这部分无需修改

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