Vue-loader with Webpack not supporting commonjs require

Trying to use vue-loader with Webpack here with the following files.

# index.js file
const Vue = require('vue/dist/vue.js')
const app =  require('./app.vue')

new Vue({
  el: '#fire',
  components: {
     app
  }
})
# app.vue file
<template>
  <div>
    Hello World {{msg}} Finally got my first vue component file
  </div>
</template>

<script>
  module.export = {
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

When I build it with webpack (successful build), the browser console gives me the following without any content on the actual viewer screen.

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

found in

---> <App>
       <Root>

But when I change const app = require('./app.vue') to import app from './app.vue', the warning is gone and the browser is able to render my template correctly. Why is this happening and how do I solve this issue without using ES6 module imports?

Personally I use the ES module with Webpack 2. The documentation does specify:

CommonJS builds are intended for use with older bundlers like browserify or webpack 1.

So if you are using Webpack 2, perhaps this is your issue.

I am using Webpack 3. vuejs is actually working fine for me. The only issue seems to be vue-loader

Since version 13.0.0, vue-loader doesn’t normalize exports anymore. You have to do

const app =  require('./app.vue').default

This sad necessary to allow vue-loader to export esModules, which are necessary to use scope hoisting in webpack 3.

Is there an option we can pass vue-loader to get it to work? I’ve got over a hundred legacy files using the old convention. Could do regex replace as a last resort.