关于 react 中 swiper 版本过高（7.0.x）导致的问题

最新推荐文章于 2022-03-23 11:08:47 发布
最新推荐文章于 2022-03-23 11:08:47 发布
阅读量1.1k 收藏 1
点赞数
文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hyhlsy/article/details/120236236
版权

React swiper bug 版本冲突 调试
关键词由CSDN通过智能技术生成

今天在学习一个 react 项目，结果因为 swiper 的一个谜之 bug 导致我浪费了一整个上午
这个 bug 是

Can't resolve 'swiper/react' ...

经过长时间的 debug，最终发现是因为安装的 swiper 版本过高导致各种组件无法引入。

解决方案：安装一个低版本的

$ npm i swiper@6.4.1
馍馍汉宝
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
降低swiper版本_swiper 轮播图 版本选择及异步使用注意事项
weixin_39632327的博客
12-21 1181
使用cnpm或者npm 在控制台输入npm view swiper versions会出现如下版本信息：swiperversions.png目前6.XX版本与react还没优化完毕 暂时不用6.XX版本可以输入如下命令使用5.XX版本yarn add swiper@5.2.0 -S装完去package.json里面再确认一下 步步确认 才能更扎实首先在index.js 中引入全局样式//引入sw...
node和npm版本过高，导致react前端发版失败
weixin_46395519的博客
03-01 453
nginx发布前端不成功时的自我尝试
react包版本过高，使 PropType属性过时的解决办法。
qq_38719039的博客
02-26 2223
一、报错如下：undefined is not an object(evaluating '_react2.PropTypes.oneOfType')二、解决方法：1. 删除react包。 2.下载低版本的react包。npm uninstall react --savenpm install react@15.4.0 --save查看 package.json文件...
vue中Swiper版本大坑解决
weixin_54586234的博客
03-23 1659
npm install swiper@4.5.1 此版本亲测可用，高版本有很多莫名其妙的bug，所以这里选择用swiper4 import Swiper from 'swiper' import 'swiper/dist/css/swiper.min.css' 在需要的页面中引入 <div class="swiper-container czp"> <div class="swiper-wrapper"> <div class="swiper-slide.
使用swiper插件时，报错Can‘t resolve ‘swiper/dist/css/swiper.css‘ in
weixin_44999716的博客
02-09 2404
使用swiper插件时，报错Can’t resolve ‘swiper/dist/css/swiper.css’ in （在学习慕课网小米商城的项目5-8_首页轮播功能实现课程时） 原因：即使安装了swiper插件依然会出现这个问题，原因是安装的swiper版本太高了 解决方案： // 先卸载掉当前版本的swiper npm uninstall swiper // 再安装指定版本的swiper降低一下版本就可以了 cnpm install swiper swiper@3.4.2 --save-dev .
TongWeb嵌入式版本用户手册-7.0.E.5
04-04
《TongWeb嵌入式版本用户手册-7.0.E.5》是针对TongWeb嵌入式版应用服务器的详细指南，适用于开发人员和系统管理员。TongWeb嵌入式版是一款支持Java EE和React响应式编程标准的服务器，同时具备基于算法模型的网关...
react中使用swiper的具体方法
08-27
React中使用Swiper的具体方法 React中使用Swiper的具体方法是指在React项目中如何使用Swiper库来实现轮播图功能。Swiper是一个流行的轮播图库，能够帮助开发者快速实现轮播图功能。但是，在React项目中使用Swiper...
react.js、react-dom.js、babel.js文件包下载
02-22
React.js、react-dom.js和babel.js是开发基于React的应用程序时不可或缺的JavaScript库和工具。在深入探讨这些文件之前，让我们先理解React的基本概念。React是由Facebook开发的一个用于构建用户界面的JavaScript库...
react下载,包括react.development.js;babel.min.js;react-dom.development.js
11-20
在这个压缩包中，包含的三个关键文件——`react.development.js`, `babel.min.js`, 和 `react-dom.development.js`，都是React生态系统中的重要组成部分。 1. **react.development.js**: 这是React库的开发版本。在...
基于react的618节日网页全屏祝福.zip
最新发布
06-08
基于react的618节日网页全屏祝福.zip基于react的618节日网页全屏祝福.zip基于react的618节日网页全屏祝福.zip基于react的618节日网页全屏祝福.zip基于react的618节日网页全屏祝福.zip基于react的618节日网页全屏祝福...
Maven-依赖调解/查看项目依赖了哪些包
文天大人
02-18 609
先说maven官方给出的2中依赖规则 1.路径最短者优先 若项目A依赖项目B，B依赖C，C依赖D（0.0.1）版本， 同时 A还依赖项目E，E也依赖项目D（0.0.2）版本，由于 A-B-C-D的长度是4 A-E-D的长度是3，因为4大于3 所以 A中直接使用D，此时D的版本是0.0.2 2.倘若规则1路径长度相同，那么 2.1： 假如A-B-C(0.0.1) A-D-C（0.0.2） A中直接使...
降低swiper版本_在vue-cli3中实现swiper层叠轮播图
weixin_39941721的博客
02-05 815
效果图1.按照npm上npm install swiper vue-awesome-swiper@4.1.1 --save安装了最新的版本，发现不会自动播放，于是按照文档上面降低版本就可以了2.在main.tsimport VueAwesomeSwiper from 'vue-awesome-swiper';import 'swiper...
vue中使用swiper出现Can‘t resolve ‘swiper/dist/css/swiper.css‘
Wow 五六 !!! 的博客
01-28 3557
vue中使用swiper出现Can’t resolve 'swiper/dist/css/swiper.css’ 在使用vue-awesome-swiper中出现Can’t resolve 'swiper/dist/css/swiper.css’错误 百度各种文档找，都不行，基本都是说各种安装，但是又总是说的含含糊糊。 最终综合了好几个文档确定是swiper版本的问题。 一般在安装的时候都是使用这个命令 npm install swiper vue-awesome-swiper --save 默认就安装了v
Error: Can‘t resolve ‘swiper/css/swiper.css‘ 解决方案
ellynxu的博客
09-04 6850
问题出在 main.js 中import 'swiper/css/swiper.css'这句话上 应该替换为import 'swiper/swiper-bundle.css'
Module not found: Can‘t resolve ‘react‘ in
Top5软件工程硕士，先后在京东、字节从事多年Java后端开发、实时和离线大数据开发
09-21 1万+
Module not found: Can't resolve 'react' in 'D:\Program\antd\antd-demo2\node_modu les\mobx-react' 解决方法：Try removingpackage-lock.json, runnpm installand thennpm startagain. 亲测可用 ...
Can‘t resolve ‘swiper/css/swiper.css 使用swiper报错
wyk760629476的专栏
05-27 2034
问题详情： 问题描述： 安装swiper之后，在main.js 配置引用。因为安装的swiper依赖中没有对应的swiper.css 解决方法： import 'swiper/css/swiper.css' 应该替换为 import VueAwesomeSwiper from 'vue-awesome-swiper' import 'swiper/swiper.scss' Vue.use(VueAwesomeSwiper) ...
react 使用element -ui问题记录 Can't resolve 'react-hot-loader'
yatsov的博客
05-21 4806
react 使用element-ui按照步骤安装即可。 但是有一点 ，如果react出问题的话，出现以下问题 Failed to compile ./node_modules/element-react/dist/npm/es5/libs/animate/index.js Module not found: Can't resolve 'react-hot-loader' in 'D:\0-le...
无法找到依赖：Could not resolve dependencies，解决办法之一
热门推荐
Jay_Weirdo的博客
09-09 1万+
项目场景： 提示：子项目引用子项目，提示无法找到artifactId ： 例如：多个子项目之前相互引用 关键字：Could not resolve dependencies 问题描述： 提示：[ERROR] Failed to execute goal on project feign-consumer-2: Could not resolve dependencies for project com.springcould:feign-consumer-2:jar:0.0.1-SNAPSHOT:
reactnative swiper用法1
08-08
通过命令npm install React-native-swiper --save可以安装React Native Swiper，并且在安装成功后会在package.json中配置依赖信息，类似于Android中的gradle配置。安装成功后，React Native Swiper会被添加到node-...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值