当前位置: 代码迷 >> 综合 >> vue项目中关于Error in nextTick: TypeError: Cannot read property 'reduce' of null报错问题
  详细解决方案

vue项目中关于Error in nextTick: TypeError: Cannot read property 'reduce' of null报错问题

热度:111   发布时间:2023-10-23 10:21:28.0

前提

最近刚接手同事的vue+element项目,就碰到了一个困扰了许久的bug,bug如标题所示,报错“ Cannot read property ‘reduce’ of null" 。 google了许久,发现跟这相关的解决手段很少,所幸最后还是解决了,这里简单记录下。

问题分析

问题的由来是:同事在测试环境用npm run build:test打包成的dist目录,可以正常运行无异常,而当我通过git pull拉下代码后再本地npm run dev运行起来,其他功能正常运行,唯独在一个页面需要点击任务详情的时候报了上述错误!
vue项目中关于Error in nextTick: TypeError: Cannot read property 'reduce' of null报错问题
问题分析:

确认同事本地代码和线上代码一致–>非代码不一致导致的异常
怀疑npm install时的node_modules出现了异常,于是删除对应的node_modules、删除package-lock.json重新install,仍无效–>非包安装异常
怀疑npm的版本不一致导致的,我的是6.4,同事的是6.9,卸载后重新安装6.9的,仍无效–>非npm版本不一致导致的异常
??排查始终围绕着同事的能运行,而我的不能运行,考虑到许多,比如是不是.gitignore上的部分导致不一致,比如同事本地环境的一些特定依赖包等等,最后仍不得其解,所幸在google的时候发现的一个issue很像,相关链接位于:https://github.com/xuliangzhan/vue-element-extends/issues/66。
??这个issue解决:TypeError: Cannot read property ‘key’ of null",和’reduce’ of null"基本是很相像的,而由key of null引起的问题就是vue-element-extends的版本和vue本身的版本不一致导致。但我的vue项目并没有引用到element-extends这个包,不过倒是让我发现了element-ui是2.8版本,而vue是2.5版本。

问题解决

根据上述的链接大神所说,匹配规则如下:

vue-element-extends 1.0.x 对应 vue^2.5+ 、element-ui^2.0~2.6
vue-element-extends 1.2.x 对应 vue^2.6+ 、element-ui^2.0+

虽然我没有使用到vue-element-extends,但我把element-ui从2.8改到2.4后问题就成功解决了,所以vue版本和element-ui整个版本匹配基本可以参照如上

总结

后续碰到’reduce’/key of null,可以多考虑是否为vue和element版本不一致所导致的~

转载地址:sandwu

  相关解决方案