Next.js出现Element type is invalid错误，该如何排查解决？

云上老周

2026-7-23

解决Next.js中Element type invalid错误

错误原因

这个错误是客户端组件与服务器组件混用导致的：在Next.js App Router中，组件默认是服务器组件，但Ant Design的UI组件只能在客户端组件中运行。你的LoginForm组件没有添加"use client"指令，被当作服务器组件处理后，内部导入的Ant Design组件无法在服务器环境初始化，最终返回undefined，触发该错误。

解决方案

在LoginForm组件的最顶部添加"use client"指令，修改后的代码如下：

"use client";
import {
  Form,
  Input,
  UserOutlined,
  LockOutlined,
  Checkbox,
  Button,
} from "antd";

const LoginForm = () => (
  <div>
    <Form name="basic" labelCol={{ span: 8 }}>
      <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>
  </div>
);

export default LoginForm;