解决swiper组件autoplay报错问题

最近在自定义一个swiper 插件 发现引用之后不定时一直在报错

Uncaught TypeError: Cannot read properties of undefined (reading 'addEventListener')

一个undefined一直被监听事件而且有时候有有时候没有在后续过程中不定时的报错很苦恼

具体错误：

看了一下是swiper 的autoplay 文件有问题 而且这个问题只要页面一离开就会报错 

解决方法（改源码的小方法）

1. 到node_modules文件中找到自己下载的swiper  文件

2. 我引入的文件是swiper/bundle 文件 

// 引入库
import Swiper from "swiper/bundle";

3. 当然你可以去找到swiper 的package.json文件找到你引入的地址对应的文件（如果你直接引入就是那个主文件main）

4.然后到swiper-bundle.esm.js文件找到那个出问题的包modules/autoplay/autoplay.js

5.然后vscode 可以直接按住ctrl 点击就能进入文件里面

6.查找浏览器报错代码

 

 

7.然后ctrl + f 查找一下 报错的代码swiper.$wrapperEl[0].addEventListener(event, onTransitionEnd

 

8.打印一下这个被监听的元素  发现不定时找不到这个元素

9.解决办法在元素前面加个？来判断一下 如果前面为假就不执行了

就不报错了

当然如果你有更好的办法请一定告诉我！！！

今天跑项目的时候我的两个手机一个能用一个不能用 而且项目没有报错 排查了多个设备测试了一下终于发现 是上面那个 ？导致项目有很大兼容性问题 只有部分高版本浏览器支持 所以把上面的 改为 if 判断就好 if(!swiper.$wrapperEl[0]) return 就好了