【Antd】 Module not found: Can‘t resolve ‘@ant-design/icons‘

原创已于 2023-03-20 17:48:43 修改 · 7.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-10-21 16:57:10 首次发布

本文讲述了在使用antd 4+版本上传功能时遇到的图标依赖缺失问题，作者发现需要额外安装@ant-design/icons来解决，并分享了问题排查和解决过程。

在使用antd上传功能的时候发现了这个错误

一开始以为是版本问题，将packjson版本和官网最新版本同步之后

还是出错

终于在官方issue里面找到原因是 antd 4+版本不带有 @ant-design/icons，包括

@ant-design/compatible 等等

直接安装 npm i @ant-design/icons 解决

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zzzicky

关注关注

6
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

【Antd】Module not found: Can‘t resolve ‘@ant-design/icons‘ in ‘E:\xx\xx\xx‘

m0_61049675的博客

01-30

1139

【代码】【Antd】Module not found: Can‘t resolve ‘@ant-design/icons‘ in ‘E:\xx\xx\xx‘

Error: Cannot find module ‘umi‘ 问题处理

LDR1109的博客

04-23

1万+

最近接触ant design，再上手的时候，老是会碰到，找不到某某模块的问题，上网搜了一下，发现很多都不能解决问题。后来，发现可以通过 yarn add 模块名的方式，处理这种Error, 如: yarn add umi 记录一下，希望也可以帮到您！ NangongYi@LAPTOP-AKD59FEP MINGW64 /d/web/html/ant/myapp $ yarn add umi yarn add v1.22.10 info No lockfile found. [1/4] .

1 条评论您还未登录，请先登录后发表或查看评论

【Antd】Module not found: Can‘t resolve ‘@ant-design/icons‘ in 文件目录下的某个文件夹

qq_45677671的博客

06-07

3万+

报错示例示例代码： import { Layout, Menu } from 'antd'; import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined, VideoCameraOutlined, UploadOutlined, } from '@ant-design/icons'; 报错信息： Module not found: Can't resolve '@ant-design/icons' in 'E:\ww

报错：Can‘t resolve ‘@ant-design/icons‘

m0_72607221的博客

07-15

6647

react启动项目 npm报错

Ant design - Module not found: Error: Can‘t resolve ‘ant-design-vue/dist/antd.css‘ in ‘ ‘

qq_20770569的博客

08-03

1384

报错：Module not found: Error: Can't resolve 'ant-design-vue/dist/antd.css' in 'xxx' 原因：引入的antd.css文件实际上应该是reset.css文件，是由于ant-design-vue的官网给的代码和实际下的包的文件不一致导致。

vue中Module not found: Error: Can‘t resolve ‘xxx’ in ‘xxx’

weixin_65528063的博客

10-25

6200

解决npm下载库找不到的问题

上述文件运行时，提示了 /node_modules/antd-v5/es/config-provider/cssVariables.js Module not found: Error: Can't resolve '@ant-design/colors' in 'F:\project\Lynkco-mall-tmall-as\node_modules\antd-v5\es\config-provider'，怎么优化

09-19

Module not found: Error: Can't resolve '@ant-design/colors' in '.../node_modules/antd-v5/es/config-provider' ``` 说明你的项目正在尝试使用 `antd-v5`，但 **缺少必要依赖包 `@ant-design/colors`**，这通常...

精选资源

解决React在安装antd之后出现的Can’t resolve ‘./locale’问题

01-06

React在安装antd之后出现的Can’t resolve ‘./locale’问题，是因为moment在2.2之后的版本都有问题，而react默认使用了最新的moment，但是在moment@2.18.1中是没有问题的。解决方案就是配置webpack的alias,将所有...

next.js报错Module not found: Can't resolve 'antd/dist/reset.css'

06-01

config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './lib/icon.js') return config } }) ``` 3. 如果以上方法都没有解决问题，你可以尝试手动安装`@zeit/next-css`模块，并将其...

vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案

weixin_45765073的博客

01-20

9083

在vue3+vite+vant项目下按需引入vant报错Failed to resolve import解决方案

Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in ‘**********‘

会思想的苇草i的博客

12-12

2904

Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in ‘**********‘

一招解决vue中Module not found Error Can‘t resolve ‘xxx‘

m0_54853420的博客

03-02

6213

你是否遇到过类似于这种的报错，是不是觉得很头疼，不知道从哪解决。别急，下面两步解决问题。解决方案： 1.删除项目文件夹下的node_modules文件夹 2.执行npm install命令，重新安装包。执行完上面两步，应该就解决问题了。 ...

Ant Design Pro项目中提示：找不到模块“@ant-design/pro-components”或其相应的类型声明

前端-卡布达的博客

03-07

1万+

Ant Design Pro项目中提示：找不到模块“@ant-design/pro-components”或其相应的类型声明

一招解决vue中Module not found: Error: Can‘t resolve ‘xxx‘

m0_64453243的博客

06-03

4万+

一招解决vue中Module not found: Error: Can‘t resolve ‘xxx‘

前端报错 : Module not found: Error: Can‘t resolve ‘xxx‘ in ‘xxx‘

weixin_64778225的博客

09-06

4万+

模块未找到:错误:无法解决../src/comporents/MyHeader' 在 'C:\Users\15718\Desktop\eight\src'错误原因是组件引入 App.vue/其他组件时出错了,仔细检查引入的!我的就是components拼写错了,查了二十分钟才发现,唉.

创建react项目并启动出现的报错解决，学习资源

小白目的博客

02-18

7593

一、预备知识：npm或yarn 二、创建项目步骤： 1.全局安装： npm install -g create-react-app 2.切换到想创建项目的目录（hello-react）：create-react-app hello-react 3.进入项目文件夹：cd hello-react 4.启动项目：npm start 三、可能出现的报错： 1. 'react-app-rewired' 不是内部或外部命令，也不是可运行的程序或批处理文件。原因：可能是由于create-re.

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve

qq_52139998的博客

11-21

1530

npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve

ant-design-vue按需引入icon以及组件

你华还是你华

05-12

2万+

大家好，我是Counterrr。不忘初心，砥砺前行。共勉。

vue项目Error: Cannot find module ‘xxx’类报错的解决方法

最新发布

12-10

解决 `Failed to resolve import '@ant-design/icons-vue'` 的问题，可参考以下步骤： ### 检查并安装依赖确保已经正确安装了 `@ant-design/icons-vue`。如果未安装，可使用以下命令进行安装： ```bash npm install @ant-design/icons-vue ``` ### 检查版本兼容性要保证 `@ant-design/icons-vue` 与项目中使用的 `ant-design-vue` 版本兼容。版本不兼容可能会导致导入失败。假设当前 `antd` 的版本是 4.16.0，却使用了 4.16.1 的模块语法，就会出现问题。可以通过修改 `package.json` 文件来更新版本： ```json // package.json 文件 { "dependencies": { "antd": "^4.16.1", "@ant-design/icons-vue": "^合适版本", ... } } ``` 修改完成后，运行 `npm install` 以安装新的依赖版本。 ### 配置 Vite 如果项目使用 Vite 构建工具，可以在 Vite 配置文件中进行相应配置。参考解决 `@element-plus/icons-vue` 导入问题的配置方式： ```javascript // vite.config.js 或 vite.config.ts import { fileURLToPath, URL } from 'node:url'; import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import vueJsx from '@vitejs/plugin-vue-jsx'; import AutoImport from 'unplugin-auto-import/vite'; import Components from 'unplugin-vue-components/vite'; import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers'; export default defineConfig({ plugins: [ vue(), vueJsx(), AutoImport({ resolvers: [AntDesignVueResolver()], imports: ['vue', 'vue-router'] }), Components({ resolvers: [AntDesignVueResolver()] }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } }); ``` ### 清理缓存并重新安装依赖有时候，缓存文件可能会导致导入问题。可以尝试清理 `npm` 缓存并重新安装依赖： ```bash npm cache clean --force rm -rf node_modules npm install ``` ### 检查文件路径和大小写要确保在代码中引用的路径和文件名的大小写是正确的，因为在某些操作系统中，文件系统对大小写是敏感的。