npm 如何修复找不到模块:无法在react应用程序中解析“@ hericons/react/solid”?

9jyewag0  于 2022-11-30  发布在  React
关注(0)|答案(8)|浏览(263)

我正在跟随这个辉煌的post学习React。但是,一些必要的位丢失。
当我在浏览器中打开应用程序时,出现错误
页面没有找到:/src/member/functions.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";
wkftcu5l

wkftcu5l1#

这将解决您的问题。

npm i @heroicons/react
ntjbwcob

ntjbwcob2#

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

**React:**首先,从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>
w41d8nur

w41d8nur3#

降级到1.0.6帮我解决了

yarn add @heroicons/react@1.0.6
pgky5nke

pgky5nke4#

对于最近遇到问题的任何人,您需要:

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

24或20是heroicons网站上指定的图标原始大小

wribegjk

wribegjk5#

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

npm install heroicons-react
y53ybaqx

y53ybaqx6#

安装后使用:
npm install @heroicons/react
使用了
npm audit fix --force

wecizke3

wecizke37#

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

"@hookform/resolvers": "^0.1.0"

添加到您的package.json

b4qexyjb

b4qexyjb8#

维护者最近发布了一个更新,它弄乱了以前版本中使用的导入。我希望他们能让这个版本更容易适应消费者。
无论如何,现在还需要在import语句中定义大小。
先前版本导入:
从“@ hericons/react/outline”导入{}
从“@ hericons/react/solid”导入{}
最新版本导入:
从“@ hericons/react/24/outline”导入{}
从'@ hericons/react/20/solid'导入{}

相关问题