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/c         


        

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.