Q: Vue.component construction raised error untill ".default" key was added In  @vue/cli 4 and vuejs 2.6.10 app, trying to use component with command :
Vue.component('listing-header', require('../../../src/components/ListingHeader.vue'))

I got console error :
[Vue warn]: Failed to mount component: template or render function not defined.

After search on the net, I found that it can be fixed with :
Vue.component('listing-header', require('../../../src/components/ListingHeader.vue').default)

I wonder what ".default" is here ?

A: See Webpack's dynamic imports documentation

The reason we need default is that since webpack 4, when importing a CommonJS module, the import will no longer resolve to the value of module.exports, it will instead create an artificial namespace object for the CommonJS module.

import() promise resolve is an object containing module's exports as keys. By using .default you are accessing module's default export....
