react脚手架引入antd报warning解决办法

已于 2022-03-18 14:42:59 修改
阅读量1.7k 收藏 2
点赞数 4
文章标签： react.js javascript
于 2022-03-18 14:04:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41555695/article/details/123573003
版权
在使用npx create-react-app创建的React项目中，引入antd.css时遇到'Failed to parse source map'警告，但页面显示正常。问题解决方法是将导入语句从import 'antd/dist/antd.css'改为import 'antd/dist/antd.min.css'。此更改可能与源映射解析不支持有关。
摘要由CSDN通过智能技术生成

报错如下
Failed to parse source map: ‘webpack://antd/./components/config-provider/style/index.less’ URL is not supported

在这里插入图片描述
用npx create-react-app创建的项目，引入antd.css后出现警告，但是页面又正常
试了安装less但不是这个原因

解决方法：
将： import ‘antd/dist/antd.css’;
改为： import ‘antd/dist/antd.min.css’

具体原理看引用

https://blog.csdn.net/FenceRain/article/details/123463036

Shirley的个人博客
关注
React 实战 | 解决引入Antd报警告JSX element type 'RadioGroup' is not a constructor function for JSX elements.
qq_35536883的博客
08-13 4342
使用公司里的脚手架搭建react项目，但是在使用antd组件时，会显示警告： JSX element type ‘RadioGroup’ is not a constructor function for JSX elements. 查看了网上的一些解决方案，大概就是这两种： 方案一 在tsconfig.json中设置"allowSyntheticDefaultImports": true 方案二...
Ant Design Table组件报错，提示table should have a unique `key` prop的解决办法
我是小妖yun的博客
08-25 319
Ant Design Table组件报错，提示table should have a unique key prop 解决方法 // 法1： rowKey : record => record.dataIndex // 法2 rowKey : (record,index)=> index
在使用antd时候明明什么都配置好了为什么会报错呢？
wenkai_lou的博客
03-25 271
在使用antd时候明明什么都配置好了为什么会报错呢？ 因为使用npm默认安装的less版本号是最新的而antd的less版本号会与之不匹配,这时候需要把项目里的less版本号会退一下（个人使用的less版本号是2.7.3） 这样重新启动项目就可以使用less了 ...
antd按需加载报错解决方案
sophieLV1993的博客
02-29 2466
在antd按需加载使用时，引用babel-plugin-import插件时项目报错，解决方案如下： （1）引入将less安装版本降至3.0以下版本，2.7.3 yarn add less@2.7.3 (2)修改webpack.config.js文件中babel-loader配置 修改内容如下： 添加代码： ["import", { "libraryName": "antd", "lib...
antd源码-spin解析
luo_qianyu的博客
04-21 3955
antd源码-spin解析 spin的作用是代表当前块正在加载中 Spin 元素的渲染 renderSpin = ({ getPrefixCls }: ConfigConsumerProps) => { const { prefixCls: customizePrefixCls, className, size, tip, ...
react脚手架创建项目
最新发布
qq_41051239的博客
02-22 1572
在mockData.js中引入mockjs，并写模拟的返回数据，第一个参数是接口，第二个是请求类型，第三个是一个函数，接收请求参数并处理之后返回数据。代码中通过规则模式匹配作代码识别和报告的插件化的检测工具，它的目的是保证代码规范的一致性和及时发现代码问题，提前避免错误发生。冲突情况，记得检查package.json和.eslintrc.js文件内容是否有引入版本不同导致的冲突情况。可以极大的提高项目中多人协作开发时的效率、代码的可读性以及可维护性。命令将配置完全暴露出来，但这是一个不可逆的操作，复杂的。
create-react-app配置Antd自定义主题/按需导入
zhouang1的博客
10-25 524
antd 的样式使用了 Less 作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。以下是一些最常用的通用变量，所有样式变量可以在 这里 找到
React + antd + ts 商城demo
qt的博客
02-26 1912
目的：实现一个react的商城demo，实现含有购物车，登录，注册，商城等功能 使用到的技术栈： 脚本：TypeScript 前端框架：React 路由管理：React-router-dom 用户界面：Antd 全局状态管理：Redux 异步状态更新：redux-saga 路由状态同步：connected-react-router 网络请求：Axios 调试工具：redux-devtools-extension 服务端： 脚本：Node.js 数据库：Mongodb 数据库可视化：Robo 3T 搭
react 组件封装原则_如何基于antd封装自己的react组件并发布到npm
weixin_29264201的博客
01-14 1030
引言在前端项目开发过程中，有大量重复的内容，比如布局相似的模块，较多的功能表单等，我们可以提炼成组件来提升效率，减少重复建设。文章以实际工作中的项目为例，介绍如何将项目中常用的组件进行封装并发布到npm中。1 前提要求在开始前你需要具备以下条件：安装了Node & npm安装了Git基本掌握npm ，git使用方法熟练使用 JavaScript & ES6 & CSS基本掌...
create-react-app 快速构建 react 项目、antd 按需加载引入和本地请求数据
weixin_43453221的博客
01-16 541
# 全局安装 npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app # 敲黑板的重点，如果要用到less,或者要看用到webpack配置文件，就要暴露webpack配置文件，使用 create-react-app 创建的项目，默认情况下是看不到 webpack 相关的配置文件，我...
react - antd中message提示配置无效问题
前端三脚猫的博客
09-20 4265
在react中使用antd组件的message全局提示时, 配置无效问题。
【Python百日进阶-Web开发-Feffery】Day390 - fac反馈05：AntdNotification通知提醒框
岳涛的博客
06-11 2194
文章目录前言：fac是什么？“人生苦短，我用Python；Web开发，首选Feffery！”↓↓↓ 今日笔记 ↓↓↓五、fac反馈：AntdNotification通知提醒框5.1 语法与参数5.1.1 语法5.1.2 主要参数说明5.2 使用示例5.2.1 基础使用5.2.2 不同的状态5.2.3 不同的弹出位置5.2.4 持续显示时长的设置 前言：fac是什么？ feffery-antd-components（简称fac），是国内大佬费弗里(Feffery)老师基于著名的React UI组件库ant
react中使用antd的过程即踩坑（警告信息）
热门推荐
从事前端，不断积累经验，学习新的技术。头像不是本人是莉莉崽（美貌、可爱集于一身的小姐姐，小仙女），一个宝藏博主，值得喜欢！
11-13 2万+
1.在使用react-antd,Table组件时报警告，虽然不影响效果但是，对于强迫症的人来说是无法接受的。 react-dom.development.js?cada:506 Warning: Encountered two children with the same key, `null`. Keys should be unique so that components maintain...
【前端】Ant Design5主题变量失效可能的原因
m0_46234046的博客
10-29 1078
在使用 Configure Provider 来设置主题变量时，需要正确配置 Provider 组件。如果您已经正确配置了主题变量，但在组件中仍然无法使用，可能是因为您没有正确使用主题变量。在使用主题变量时，需要使用。在上述代码中，我们引入了中文语言包，并将其传递给 Configure Provider 的。在使用 Ant Design 5 的组件时，需要正确引入样式文件。请确保正确使用主题变量，并在样式文件中使用。配置中设置的主题变量。在使用主题变量时，需要正确配置。在上述代码中，我们将主题变量的。
导入项目后，红色波浪
fuqilee的博客
08-07 235
maven父子项目，导入项目之后，项目一直有红色的波浪线，这个问题折磨我很久。 第一次遇到，直接自己新创建了项目，将所有的项目重新创建进去，问题解决。 第二次遇到，真的有点发疯的感觉，这次不想绕了，直接要解决。 首先看吧，我的父节点pom配置： 父项目就是管理版本的，配置的maven里的引用包，不会下载，子项目使用到了，才会下载jar。 使用dependencyManagement 管理，但凡在其中的包，都不会下载jar。 题外知识： 另外在解决问题中也用遇到type和sc...
antd报错：Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.怎么解决
weixin_46600029的博客
10-05 2492
antd报错：Warning: [antd: Menu] `children` is deprecated. Please use `items` instead.，版本问题
vue项目中chunk-vendors.js提示报错的查看方法
m0_54853420的博客
03-02 8588
经常在vue项目中，会有chunk-vendors.js报出的各种错误提示，但可能有的报错很多人不懂的如何查看，接下来，给大家一个示例： 上图中的报错，很多人可能只会看【Vue warn】中的错误，而忽略【system】中的错误提示，导致在页面中找了无数个“indexOf”也解决不了错误，其实这条错误产生的步骤都已经在【system】中。让我们由下往上看，错误产生的步骤流程依次是settlement–>otherfun–>list_fun–>audio_play,很明显是因为audio_
React 中 引入 antd CSS 报警告 解决方法
埋葬冬天super
08-17 1251
React 中 引入 antd CSS 报警告 解决方法
React 18 使用antd的message,notification组件报错createRoot warning
csdn1940879828的博客
07-31 471
React18使用antd组件报错：Use createRoot instead" occurs because theReactDOM.render methodhas been deprecated. 升级antd版本解决
webpack+react+antd脚手架性能优化实战
"这篇文章主要探讨了如何优化基于webpack、react和antd的脚手架，旨在提升项目的构建效率和性能。作者分享了一些实用的优化策略，包括样式分离、第三方库分离、环境配置、热更新和公共代码提取等关键点。" 在优化...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值