文章/答案/技术大牛

发布

社区首页 >问答首页 >NextJs错误:元素类型无效:使用Heroicons时应为字符串

问NextJs错误:元素类型无效:使用Heroicons时应为字符串
EN

Stack Overflow用户

提问于 2021-05-24 02:37:19

回答 1查看 304关注 0票数 0

我正在尝试构建一个使用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;
  }
}

next.js

tailwind-css

reactjs

icons

回答 1

Stack Overflow用户

发布于 2021-05-27 22:22:28

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

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

请检查您的代码。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67663210

复制

相似问题

问NextJs错误:元素类型无效:使用Heroicons时应为字符串
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJs错误:元素类型无效:使用Heroicons时应为字符串EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问NextJs错误:元素类型无效:使用Heroicons时应为字符串
EN