需求: UniApp
的 H5
端已经正常使用,现在打算兼容微信小程序
。
1. 问题分析
本以为应该很顺利,但是一上来就直接报错了,心里很慌呀,报错信息如下:
页面[components/major/major-intro]错误:
TypeError: Cannot read property 'FormData' of undefined
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:20109)
at __webpack_require__ (runtime.js?t=wechat&s=1679123222779&v=c88fbffc60b4101fd05b6808eff1ad49:92)
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:20097)
at __webpack_require__ (runtime.js?t=wechat&s=1679123222779&v=c88fbffc60b4101fd05b6808eff1ad49:92)
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:19751)
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:19976)
at __webpack_require__ (runtime.js?t=wechat&s=1679123222779&v=c88fbffc60b4101fd05b6808eff1ad49:92)
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:19681)
at __webpack_require__ (runtime.js?t=wechat&s=1679123222779&v=c88fbffc60b4101fd05b6808eff1ad49:92)
at Object.<anonymous> (vendor.js?t=wechat&s=1679123222779&v=0a98776a18c77e11bdf2a8a15af44f38:19609)
(env: Windows,mp,1.06.2209190; lib: 2.30.2)
点击源码中看到的是这个:
/***/ }),
/* 170 */
/*!***********************************************!*\
!*** ./node_modules/form-data/lib/browser.js ***!
\***********************************************/
/*! no static exports found */
/***/ (function(module, exports) {
/* eslint-env browser */
module.exports = typeof self == 'object' ? self.FormData : window.FormData;
/***/ }),
【注】刚开始的时候以为是微信小程序
兼容性或者是 uniapp
兼容性的问题,但是去了 axios
的 GitHub
issue
中去搜索,结果发现了有人遇到了同样的问题。啊,,这,,看样子这三者都有各自的问题呀。
Issue
地址:node Cannot read property ‘FormData’ of undefined #5201
经过了多次折腾与验证,不认有心人,大概率破案了:就是在微信小程序上,导致 axios
在判断的时候出现问题,在 H5 的浏览器中就没有这个错误(看起来是这两个的锅,还真的不是 uniapp
的锅,哈哈)。
2. 解决方案
2.1 降低 axios 版本
axios
的 0.x
版本最高为 0.27.2
版本,所以直接如下操作即可。
# 移除已有的 axios
npm uninstall axios
# 安装指定版本的 axios
npm install axios@0.27.2
2.2 提高到 axios 指定版本(推荐)
项目中用的是 1.2.1
版本(会报错),截止到 2023年3月18日,最新的为 1.3.4
,所以直接装了 1.3.4
版本,结果是可以用的,没有报错。
由此可以得出,估计 axios
自身也有问题,但是具体不知道是哪个版本修复的,没有深入排查。
# 移除已有的 axios
npm uninstall axios
# 安装指定版本的 axios
npm install axios@1.3.4
【注】各位大佬们,如果是其他的版本也可以用的话,告诉小弟一下! 祝头发多多!!!