如何修复模块找不到:不能解决‘@英雄主义者/反应/固体’在反应应用？

Question

我是跟随这个聪明的帖子来学习反应。然而，一些基本的比特缺失了。

当我在浏览器中打开应用程序时，我会得到错误。

./src/components/Navbar.js模块未找到:无法解析@海洛因/react/solid‘

显然，我错过了一个模块。我试着安装它，但到目前为止没有任何帮助。

我试过：

npm install heroicons-react

npm install @react-icons/all-files --save

npm install @iconify/icons-heroicons-solid

npm install @heroicons/vue

文件夹结构如下所示：

project
|
|-package.json
|-node_modules
|-homepage
  |-node_modules
  |-package_json
  |-src
  |-public
  |-README.md

我尝试执行项目目录和主页目录中的命令。不知道我该用哪一种。

Navbar.js中的代码如下所示：

import { ArrowRightIcon } from "@heroicons/react/solid";

Answer 1

这会解决你的问题。

npm i @heroicons/react

Answer 2

这个问题已经解决了，我只想为新来的人再添几样东西。英雄人物有关于GitHub的清晰文档。

React:优先，从npm安装@heroicons/react：

npm install @heroicons/react

现在，每个图标都可以作为一个反应性组件单独导入：

import { BeakerIcon } from '@heroicons/react/solid'

function MyComponent() {
  return (
    <div>
      <BeakerIcon className="h-5 w-5 text-blue-500"/>
      <p>...</p>
    </div>
  )
}

Vue 注意，此库目前只支持Vue 3。

首先，从npm安装@heroicons/vue：

npm install @heroicons/vue

现在，每个图标都可以作为Vue组件单独导入：

<template>
  <div>
    <BeakerIcon class="h-5 w-5 text-blue-500"/>
    <p>...</p>
  </div>
</template>

<script>
import { BeakerIcon } from '@heroicons/vue/solid'

export default {
  components: { BeakerIcon }
}
</script>

Answer 3

降级到1.0.6帮我解决了这个问题

yarn add @heroicons/react@1.0.6