问题描述

在使用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又是什么呢？