Next.js全局导入Arwes组件报错：元素类型无效，如何解决？

核心错误原因 #

1. 未导入使用的组件：你在index.tsx中直接使用了Card、Button、Text组件，但没有从arwes库中导入这些组件，导致React无法识别组件类型，抛出"got: undefined"的错误。
2. 对ArwesThemeProvider的误解：ArwesThemeProvider仅负责为应用提供主题、动画等上下文环境，不能让Arwes的组件自动全局可用，所有要使用的组件必须显式导入。

解决方法 #

方法一：页面内显式导入组件（最直接） #

修改index.tsx，在顶部添加需要的组件导入语句，同时补充IMAGE_URL的定义：

import type { NextPage } from 'next'
import Head from 'next/head'
import Image from 'next/image'
import styles from '../styles/Home.module.css'
// 新增：导入需要的Arwes组件
import { Card, Button, Text } from 'arwes';

// 定义IMAGE_URL，替换为实际图片链接
const IMAGE_URL = 'https://example.com/nebula-image.jpg';

const Home: NextPage = () => {
  // ... 原有代码不变
}

export default Home

方法二：创建全局组件导出文件（避免重复导入） #

如果不想在每个页面重复写导入语句，可以创建一个统一的组件导出文件：

1. 在项目根目录创建components/ArwesExports.tsx：

// 统一导出常用的Arwes组件
export {
  Card,
  Button,
  Text,
  Table,
  // 按需添加其他常用组件
} from 'arwes';

2. 在页面中从该文件导入组件：

import { Card, Button, Text } from '../components/ArwesExports';

额外优化：启用StylesBaseline #

你在_app.tsx中导入了StylesBaseline但未使用，建议添加它来重置全局样式，避免默认样式冲突：

import '../styles/globals.css'
import type { AppProps } from 'next/app'
import {
  ArwesThemeProvider,
  StylesBaseline
} from 'arwes';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <ArwesThemeProvider>
      {/* 新增：添加全局样式重置 */}
      <StylesBaseline />
      <Component {...pageProps} />
    </ArwesThemeProvider>
  )
}

export default MyApp

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