侧边栏壁纸
博主头像
lai博主等级

  • 累计撰写 21 篇文章
  • 累计创建 12 个标签
  • 累计收到 0 条评论

TypeError: vant_es_image__WEBPACK_IMPORTED_MODULE_16__.default is not a constructor

lai
lai
2021-05-12 / 0 评论 / 2 点赞 / 773 阅读 / 2,149 字
温馨提示:
本文最后更新于 2021-05-14,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

问题描述

在使用vant开发的过程中,代码执行直抛出

TypeError: vant_es_image__WEBPACK_IMPORTED_MODULE_16__.default is not a constructor
   at elevator.1620826346296.js:327
    at Array.forEach (<anonymous>)
    at VueComponent.loadImagesHeight 	 
    (elevator.1620826346296.js:325)
    at elevator.1620826346296.js:305

解决过程

通过上述大概可以定位异常代码段

list.forEach(function(item, index) {
    //创建图片对象,加载图片,计算图片高度
    let img = new Image();
    img.src = item.cover;
	...
}

1.使用debugger; 打断点,出现了断点位置与代码不匹配的情况,一直未能确定异常代码段;

2.在浏览器控制台中执行let img = new Image(); 未见异常

经过一番折腾已经未能找到TypeError: vant_es_image__WEBPACK_IMPORTED_MODULE_16__.default is not a constructor异常原因

最终解决

最后决定先让debugger;断点处与代码段匹配,使用devtool:'souce-map',项目是基于vue-cli创建的,可以在vue.config.js中配置,如下内容

...
module.exports = {
	...
	configureWebpack: {
		devtool:'souce-map'
	}
	...
}
...

重启项目,执行断点,编译后代码

list.forEach(function (item, index) {
        //创建图片对象,加载图片,计算图片高度
        var img = new vant_es_image__WEBPACK_IMPORTED_MODULE_16__["default"]();
        img.src = item.cover; // img.onload = img.onerror = (e) => {...}
}	
/* harmony import */ var /* harmony import */ var vant_es_image_style__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(/*! vant/es/image/style */ "./node_modules/vant/es/image/style/index.js");
/* harmony import */ var vant_es_image__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__(/*! vant/es/image */ "./node_modules/vant/es/image/index.js");

源代码引用

import {
        Image,
        Tabs,
        Tab
    } from "vant";

export default {
        components: {
            [Image.name]: Image
            [Tabs.name]: Tabs,
            [Tab.name]: Tab
        },
	...
}

可以通过编译后代码发现new Image();并不是目标对象而是引用了vant中的vant/es/image

最后代码使用别名的方式引入vant Image,问题解决!!!

 import {
        Image as VImage,
        Tabs,
        Tab
    } from "vant";

    export default {
        components: {
            "v-image": VImage
            [Tabs.name]: Tabs,
            [Tab.name]: Tab
        },
	...
}

总结

vant_es_image__WEBPACK_IMPORTED_MODULE_16__ 应该提前察觉到是vant_es_image导致,那么souce-map又是什么呢?

0

评论区