NextJs 错误：元素类型无效：使用 Heroicons 时需要一个字符串
Posted
技术标签:
【中文标题】NextJs 错误：元素类型无效：使用 Heroicons 时需要一个字符串【英文标题】：NextJs Error: Element type is invalid: expected a string When using Heroicons 【发布时间】：2021-08-12 05:39:39 【问题描述】：我正在尝试构建一个使用 Tailwind CSS 和 Heroicons 的应用程序。但是，当我使用一些特定图标时，应用程序会中断（VeiwGridIcon、ChatIcon、BellIcon、CHeneronDownIcon）。我已经使用了其他运行良好的图标，但由于某种原因，只有它们有效。我已经尝试重新安装 Tailwind 和 Hericons，但得到了相同的结果。我还仔细检查了我的导入，但它们都是正确的。
输出/错误信息：
代码：
index.js
import Head from "next/head";
import Header from "../components/Header";
export default function Home()
return (
<div>
<Head>
<title>Facebook</title>
</Head>
/* Header */
<Header />
<main>
/* Sidebar */
/* Feed */
/* Widgets */
</main>
</div>
);
Header.js（出现问题的代码）：
import Image from "next/image";
import
BellIcon,
ChatIcon,
CheveronDownIcon,
HomeIcon,
UserGroupIcon,
ViewGridIcon,
from "@heroicons/react/solid";
import
FlagIcon,
PlayIcon,
SearchIcon,
ShoppingCartIcon,
from "@heroicons/react/outline";
import HeaderIcon from "./HeaderIcon";
function Header()
return (
<div
className="sticky top-0 z-50 bg-white flex
items-center p-2 lg:px-5 shadow-md"
>
/* Left */
<div className="flex items-center">
<Image
src="https://links.papareact.com/5me"
width=40
height=40
layout="fixed"
/>
<div className="flex ml-2 items-center rounded-full bg-gray-100 p-2">
<SearchIcon className="h-6 text-gray-600" />
<input
className="hidden md:inline-flex ml-2 items-center bg-transparent outline-none placeholder-gray-500 flex-shrink"
type="text"
placeholder="Search Facebook"
/>
</div>
</div>
/* Center */
<div className="flex justify-center flex-grow">
<div className="flex space-x-6 md:space-x-2">
<HeaderIcon active Icon=HomeIcon />
<HeaderIcon Icon=FlagIcon />
<HeaderIcon Icon=PlayIcon />
<HeaderIcon Icon=ShoppingCartIcon />
<HeaderIcon Icon=UserGroupIcon />
</div>
</div>
/* Right */
<div className="flex items-center sm:space-x-2 justify-end">
/* Profile Pic */
<p className="whitespace-nowrap font-semibold pr-3">
Anish Kunapareddy
</p>
// This code seems to be wrong
<ViewGridIcon />
<ChatIcon />
<BellIcon />
<CheveronDownIcon />
</div>
</div>
);
export default Header;
HeaderIcon.js
function HeaderIcon( Icon, active )
return (
<div
className="flex items-center cursor-pointer
md:px-10 sm:h-14 md:hover:bg-gray-100 rounded-xl
active:border-b-2 active:border-blue-500 group"
>
<Icon
className=`h-5 text-gray-500 text-center sm:h-7 mx-auto
group-hover:text-blue-500 $active && "text-blue-500"`
/>
</div>
);
export default HeaderIcon;
globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components
.icon
@apply hidden xl:inline-flex p-2 h-10 w-10;
【问题讨论】：
【参考方案1】：这是因为导入的图标不存在。 您从“@heroicons/react”导入的内容是错误的。
我看到“@heroicons/react/solid”中不存在“CheveronDownIcon”
请检查您的代码。
【讨论】：
以上是关于NextJs 错误：元素类型无效：使用 Heroicons 时需要一个字符串的主要内容，如果未能解决你的问题，请参考以下文章
Next Js 错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件）但得到：未定义