打开很久之前的项目,项目运行没问题,打开页面没问题,点击添加按钮,问题来了。本来应该出现一个弹框,但没有出现,且控制台出现以下报错。
在这里插入图片描述
先去测试环境看下,测试环境没问题。那还是先解决本地吧,不然没法搞。

首先,正常分析
根据报错内容,父组件传子组件时,prop缺少一个“name”。看到时很懵逼,因为用的是iview组件库的 Modal 组件,无论是之前使用这个组件还是人家文档里,都没有提到需要用到这个 name属性。既然他报错,那补上看看有没有效果。很明显,没有效果,不然前面就不会写“首先,正常分析”了,哈哈。

其次,查看报错行
<VueJsModal> at src/Modal.vue
查看报错显示的文件位置,应该在src文件夹下的Modal.vue文件出现的问题。正常情况下,哪个好人家会把组件文件建在src下,但万一呢,看一下保险点,很好,并没有这个文件。
那,全局搜索看看有没有<VueJsModal>,没有!开始绞尽脑汁(发呆)地想,这个<VueJsModal>是个什么玩意,我用的是<Modal>组件,这玩意从哪来的,难道要去看iview源码,但感觉问题也不是出在源码上,之前使用都没这问题。

开始问百度
百度给的结果也没用,都是常规的解决方法,并不能解决这莫名其妙的报错。

同事:重装依赖看看
实在想不出来,请教下中国好同事。同事:“重装依赖看看!”。好思路,之前也有类似不知名的报错,重装依赖后,就没问题了。搞完之后,还是不行。同事过来看了下,发现package.json里面居然有两个iview的库,可能是两个库版本冲突,导致报错,删了一个后,重装依赖,然后开始自信满满地等待,这次肯定行了!结果,不,不行,打开后还是一样报错。天杀的,这到底是怎么回事,啊,我危危可及的头发又少了几根。

终于可以了
转战AI,把AI给的答案一一否定后,到了它让我上传main.js时,终于找到了,文件里引用了一个vue-js-modal库,且在iview后面注册。

......
import ViewUI from 'view-design'
import vmodal from 'vue-js-modal'
......
Vue.use(ViewUI, {
  transfer: true
})
Vue.use(vmodal) // 在ViewUI,也是iview后面注册,导致浏览器解析的是这个组件库
......

虽然它注册的名不是Modal,但在我打开的页面里,浏览器解析时是vue-js-modal,而不是iviewModal组件,导致前面出现的报错。

写在最后
花了快一天的时间解决了。看到答案时,发现原来就这么简单?就这两行代码把我愁得头发多掉了几根,想得我抓耳挠腮。但也是欣喜的,虽然简单,过程却经历很多思考,一步步地定位问题,由小及大,毕竟一开始也绝对想不到明明是一个模态框出现的bug,问题却出在项目入口文件里。

Logo

有“AI”的1024 = 2048,欢迎大家加入2048 AI社区

更多推荐