【React + Antd 教程】Failed to compile. Module not found: Can't resolve 'antd/dist'完美解决

最新推荐文章于 2025-10-06 02:36:19 发布
原创 最新推荐文章于 2025-10-06 02:36:19 发布 · 1.1w 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#React #Web #Antd #前端

本文介绍了在学习React + Antd过程中遇到的`Failed to compile. Module not found: Can't resolve 'antd/dist'`错误，分析了错误原因，并分享了解决此问题的具体步骤，通过更改导入路径成功编译并通过运行。

【React + Antd 教程】Failed to compile. Module not found: Can’t resolve 'antd/dist’完美解决

今天在学习React + Antd时

出了个不能编译的报错

Failed to compile.
./src/App.js
Module not found: Can't resolve 'antd/dist' in 'G:\***\src'

在这里插入图片描述
在这里插入图片描述
我是跟着视频敲得代码啊

怎么我这里就出错了呢 ？ ？ ？

在这里插入图片描述
于是

我在网上找寻各种解决办法

无 果

还得靠自己解决

首先

这个“Module not found: Can’t resolve ‘antd/dist’”报错的意思是：

'antd/dist’这个模块没有找到

于是我就查看该目录

在这里插入图片描述
这不是有这个模块吗？ ？ ？ ？ ？ ？
在这里插入图片描述
在这里插入图片描述
然后

我想是不是不能直接导入这个包

导入整个包是不是就不能编译

所以是不是这里的问题呢？

于是

我更改导入为


                

                
                
        

    


  


        

            

                      
                        最低0.47元/天 解锁文章
                          
                      
            

        


    



                



	

		

			

				
					
Weex报错Module build failed的Webpack配置问题解决方案

				
			

			

				

					shejizuopin的博客
				

				

					05-21
					
					576
					
				

			

		

		

			
				
在Weex开发中，Module build failed错误常由Webpack配置问题引起。主要原因包括配置错误、依赖未安装、路径错误或版本不兼容。解决方案包括：检查并修正Webpack配置文件，确保所有依赖已正确安装，清理并重新安装依赖，检查版本兼容性，使用Webpack分析工具进行调试，以及参考官方文档和社区讨论。通过这些步骤，可以有效解决构建问题，确保项目稳定运行。

			
		

	



                

            
              



	

		

			

				
					
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] .

			
		

	



              


  
              

                


	

		

			

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

				
			

			

				

					会思想的苇草i的博客
				

				

					12-12
					
					2883
					
				

			

		

		

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

			
		

	





	

		

			

				
					
解决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,将所有的 moment 路径引用导入到 moment@2.18.1
操作步骤
安装moment 依赖 npm install moment@2.18.1
在react项目中使用yarn eject暴露config文件。如果没有安装yarn，则 先使用npm install -g yarn，再使用yarn eject暴露confi

			
		

	



		

			
		



	

		

			

				
					
Ant Design入门教程：从零开始构建企业级React应用

					
最新发布

				
			

			

				

					gitblog_00199的博客
				

				

					10-06
					
					514
					
				

			

		

		

			
				
Ant Design（简称 antd）是一套企业级UI设计语言和React UI组件库，提供了丰富的预制组件，帮助开发者快速构建美观且功能完善的Web应用。本教程将从环境搭建开始，带你逐步掌握Ant Design的核心使用方法，最终完成一个简单的企业级应用界面。

## 一、环境准备与安装

### 1.1 安装Node.js和npm
在开始前，请确保你的开发环境中已安装Node.js（v16或以...

			
		

	





	

		

			

				
					
解决React在安装antd之后出现的Can't resolve './locale'问题(推荐)

				
			

			

				

					10-15
				

			

		

		

			
				
主要介绍了解决React在安装antd之后出现的Can't resolve './locale'问题,本文给大家分享解决方案，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

			
		

	





	

		

			

				
					
Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in ‘E:\new\react\geek-pc\src‘

				
			

			

				

					weixin_51583081的博客
				

				

					01-03
					
					8492
					
				

			

		

		

			
				
Hi,我是赵猛，今天是做react项目的第二天，记录一下学习过程中出现的一些问题。

			
		

	





	

		

			

				
					
react引入antd报错找不到antd/dist/antd.css Module not found: Error: Can‘t resolve ‘antd/dist/antd.css‘ in

				
			

			

				

					weixin_51867622的博客
				

				

					11-19
					
					1万+
					
				

			

		

		

			
				
Failed to compile.

Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\react-file\exercise\react-pc-142\src'     
ERROR in ./src/index.js 9:0-28
Module not found: Error: Can't resolve 'antd/dist/antd.css' in 'D:\develop\file\re

			
		

	





	

		

			

				
					
Ant Design 使用出现 Error: Can‘t resolve ‘~antd/dist/antd.css‘

				
			

			

				

					张三疯zk的博客
				

				

					02-23
					
					1万+
					
				

			

		

		

			
				
去文档官网看了一下在5.2.2版本中的引入文件名确实已经改变了 其实就是版本升级问题。发现是css引入文件路径有问题，沿着这个路径找发先引入文件已经改名了。在运行Recat-Ant Design项目安装依赖时发现控制台报错。改变文件名，项目就成功启动了。

			
		

	





	

		

			

				
					
react  新增页面是Failed to compile Module not found: Error: Can't resolve 'E:/demo/projectText/myapp/src/pages/Admin/UserManager' in 'E:\demo\projectText\myapp\src\.umi\core'

				
			

			

				

					03-26
				

			

		

		

			
				
错误信息是“Failed to compile module not found error can't resolve admin usermanager umi core”。首先，我得理解这个错误的原因。根据用户提供的引用信息，类似的模块未找到错误通常是因为缺少依赖或者路径...

			
		

	





	

		

			

				
					
前端项目的index.css文件中有@unocss preflights;
@unocss default;
这个  运行项目后报错了Failed to compile, check the errors for troubleshooting.
File: C:\Users\Lyun\Desktop\react-antd-admin-pro-main\src\index.css:1:1
  × Module build failed:
  ╰─▶   × TypeError: Cannot read properties of undefined (reading '__esModule')
        │     at handleExports (C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@rspack\core\dist\cssExtractLoader.js:170:40)
        │     at C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@rspack\core\dist\cssExtractLoader.js:264:7
        │     at C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@rspack\core\dist\index.js:6301:13

 @ ./src/index.tsx

File: C:\Users\Lyun\Desktop\react-antd-admin-pro-main\src\index.css:1:1
  × Module build failed:
  ╰─▶   × Error: UnoCSS config not found: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'
        │     at plugin (file:///C:/Users/Lyun/Desktop/react-antd-admin-pro-main/node_modules/@unocss/postcss/dist/esm.mjs:198:13)
        │     at async plugins (C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@unocss\postcss\dist\index.cjs:11:16)
        │     at async LazyResult.runAsync (C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@rsbuild\core\compiled\postcss\index.js:1088:17)       
        │     at async Object.loader (C:\Users\Lyun\Desktop\react-antd-admin-pro-main\node_modules\@rsbuild\core\compiled\postcss-loader\index.js:99:20)

				
			

			

				

					08-23
				

			

		

		

			
				
- **错误类型2**：`Module not found: Can't resolve 'virtual:uno.css'`  检查Vite配置是否包含：  ```javascript  // vite.config.js  import Unocss from 'unocss/vite'   export default {  plugins: [  Unocss...

			
		

	





	

		

			

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

				
			

			

				

					2301_78450837的博客
				

				

					05-07
					
					679
					
				

			

		

		

			
				
发现dist文件夹当中根本没有antd.css，其实就是改名了，改成了reset.css。把代码当中的antd.css改为reset.css就可以正常出现界面了。打开目标文件夹中的node_modules文件夹，界面无法正常打开，显示antd.css找不到。然后npm.start启动时，出现下列报错。搜索antd，打开antd文件夹，再打开。

			
		

	





	

		

			

				
					
react+antd解决报错：Module not found: Can't resolve 'antd/es/affix'

				
			

			

				

					chunchun1230的博客
				

				

					03-04
					
					7961
					
				

			

		

		

			
				
问题

今天在使用antd的时候，引入“抽屉”组件的时候报错Module not found: Can’t resolve ‘antd/es/Drawer’，找了一些文档发现有遇到类似问题但是没有看到解决办法，所以还是写一篇文档来记录以及解决下这个问题吧。

解决
这个问题其实就是antd的版本问题，你目前引入的版本和你所使用的组件相冲突，当前引入的组件在当前的antd版本内找不到。所以解决起来...

			
		

	





	

		

			

				
					
React练习项目在src中使用@import ‘~antd/dist/antd.css‘； 报错：Can‘t resolve ‘~antd/dist/antd.css‘

				
			

			

				

					m0_62544477的博客
				

				

					03-30
					
					875
					
				

			

		

		

			
				
使用@import '~antd/dist/antd.css'; 报错：Can‘t resolve '~antd/dist/antd.css'

			
		

	





	

		

			

				
					
react antd报错：Module not found: Can't resolve 'antd/es/divider' in

				
			

			

				

					water_Popcorn的博客
				

				

					10-08
					
					1万+
					
				

			

		

		

			
				
错误描述：Module not found: Can't resolve 'antd/es/divider' in 'C:\Users\DELL\Desktop\exam\src\components\admin'

错误原因：这个错误主要是因为antd的版本是用不一致导致

解决方法：

1、在antd的官网右上角找到现在使用的版本



2、到项目的package.json文件下修改版本号

...

			
		

	





	

		

			

				
					
Module not found: Can‘t resolve ‘antd/es/time-picker/style‘ in ‘xxxxxx自己项目的文件‘

				
			

			

				

					CASD_HYZ的博客
				

				

					02-29
					
					1508
					
				

			

		

		

			
				
不行的话就看上面原因里 移除 babel-plugin-import 的图片里的步骤吧。（再不行我也不会了，你换个方法吧，换我的第二个方法。然后运行你就会发现，非常完美！--------------------------------------结束。antd5.0之后，弃用 less，采用 CSS-in-JS。（因项目而异，我这个项目有这个。如果第二步没有这个文件或方法可以直接试着运行看看，说不定就能成了。你可以把  antd  的版本 换成5.0之前的呀！然后再运行就没问题啦！按需加载插件的原因。

			
		

	





	

		

			

				
					
Failed to compile. Failed to compile. ./src/App.js Line 9: ‘React‘ must be in scope when using

				
			

			

				

					qq_26705343的博客
				

				

					09-07
					
					818
					
				

			

		

		

			
				
这里报错，因为组件没有引入React 或者 React 小写 导致，补充修正就会正常运行
import React from 'react';




			
		

	





	

		

			

				
					
Can‘t resolve ‘antd/es/style/themes/default.less‘ in ‘.umi\plugin-layout\layout

				
			

			

				

					qq_31666019的博客
				

				

					10-17
					
					1603
					
				

			

		

		

			
				
出现这个报错的原因是因为使用了antd最新版本V5，试着把antd最新版本先卸载，然后再把版本降低到V4.1.3，最终成功。第二步：yarn add antd@4.1.3。第一步：yarn remove antd。

			
		

	





	

		

			

				
					
解决报错提示 Failed to compile Module not found: Error: Can‘t resolve ‘@xxx‘ in ‘E:\src\router\modules‘

					
热门推荐

				
			

			

				

					m0_47469819的博客
				

				

					08-25
					
					2万+
					
				

			

		

		

			
				
npm 报错提示: Failed to compile ./src/router/modules/xx.js Module not found: Error: Can’t resolve ‘@xxx’ in ‘E:\src\router\modules’ 解决方法
报错界面

删除项目内的node_modules文件夹并重新在终端运行npm install命令即可

...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 6

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值