如何修复模块找不到：无法解决反应应用程序中的"@heroicons/反应/固体"？

Question

我关注这篇精彩的文章来学习反应。然而，一些重要的位丢失了。

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

。/src/组件/Navbar.js模块未找到:无法解析'@heroicons/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

对于最近遇到麻烦的人，您需要:

import {} from '@heroicons/react/24/outline'

24或20是heroicons站点

中指定的图标的原始尺寸。

Answer 3

这个问题已经解决了，我只是想为新手添加一些更多的东西。heroicons在GitHub上有清晰的文档。

反应:首先，从npm:

安装@heroicons/react

npm install @heroicons/react

现在每个图标都可以作为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 4

朋友们，如果你想使用heroiconsV2与，只要确保你使用了正确的路径，就像下面这样:

import {UserIcon, Bars3Icon} from "@heroicons/react/24/solid"

有24和20@heroicons/react/对于TypeScript，你应该使用这些文件夹。

Answer 5

降级到1.0.6解决了这个问题

yarn add @heroicons/react@1.0.6

Answer 6

维护者最近发布了一个更新，它混淆了以前版本中使用的导入。我希望他们能让这个版本更容易适应消费者。

无论如何，您现在还需要在import语句中定义大小。

旧版本导入:

import {} from '@heroicons/react/outline'

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

最新版本导入:

import {} from '@heroicons/react/24/outline'

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

Answer 7

这可能是因为安装的版本是v2 heroicons。尝试安装heroiconsv1.

npm install heroicons-react

Answer 8

我在nextjs上安装@heroicons/react时遇到了同样的问题，通过将模块安装为devDependencies来解决这个问题。

按如下方式安装:

npm i -D  @heroicons/react

这将修复模块和使用模块时的类型错误

@heroicons/react/24/outline和@heroicons/react/20/solid.

Answer 9

安装后:

npm install @heroicons/react

使用

npm audit fix --force

Answer 10

测试此命令npm install heroicons-react或添加

"@hookform/resolvers": "^0.1.0" 

到package.json

Answer 11

如果你的代码库直接从@heroicons/react/solid导入，你可能会尝试从Heroicons v1导入，但你已经安装了Heroicons v2。

使用以下命令:

npm install @heroicons/react@v1

Answer 12

确保@heroicons/react包已经安装。您可以在终端中运行以下命令:

npm install @heroicons/react

Answer 13

您可能有较新的版本(2)，但您需要v1。就发生在我身上。我不得不卸载v2并使用

npm install @heroicons/react@v1

this for me.

Answer 14

如果你用React编码，你只需要安装React库。@heroicons/vue是特定于vue框架的，其他库也不需要。

在项目的根目录下运行这个命令

npm install @heroicons/react

现在，在你的Navbar.js导入ArrowRightIcon。有24和20两个版本。

24是标准的24*24图标。20是迷你20*20

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