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

前提

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

问题分析

问题的由来是：同事在测试环境用npm run build:test打包成的dist目录，可以正常运行无异常，而当我通过git pull拉下代码后再本地npm run dev运行起来，其他功能正常运行，唯独在一个页面需要点击任务详情的时候报了上述错误！

问题分析：

确认同事本地代码和线上代码一致–>非代码不一致导致的异常
怀疑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