vue.js - Why need default after require() method in Vue?

Question

There are 2 projects generated by vue-cli.

one of it I could add component like this code below:

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue"));

But another one I can't do this , I must code like this:

Vue.component('HeaderBar',require("./components/common/HeaderBar.vue").default);

if not, I will get this error message:

Failed to mount component: template or render function not defined

Is anyone could tell me Why like this ？

Thank you for help .

Answer 1

When using ES6 imports (export default HeaderBar), the exported module is of the format {"default" : HeaderBar}. The import statement handles this assignment for you, however, you have to do the require("./mycomponent").default conversion yourself. The HMR interface code cannot use import as it doesn't work inline.

If you want to avoid that, use module.exports instead of export default.