【问题标题】：NextJs Error: Element type is invalid: expected a string When using HeroiconsNextJs 错误：元素类型无效：使用 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;
  }
}

【问题讨论】：

标签： reactjs icons next.js tailwind-css

【解决方案1】：

这是因为导入的图标不存在。您从“@heroicons/react”导入的内容是错误的。

我看到“@heroicons/react/solid”中不存在“CheveronDownIcon”

请检查您的代码。

【讨论】：