How to render .vue file in javascript when using ES5? (Trying to use webpack and vue-loader)

I have been trying to migrate a vue project and I unfortunately cannot use import/export in where I am building the application. Therefore, to simplify my problem, I created a project from scratch to build a vue component without the vue-cli.

I have been successful to bring up the vue app with webpack before I created .vue files but after that point I started to get the following error and my .vue file wouldn’t render.

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

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

The code is the following and I’ll try to keep it as simple as possible:

index.js

var Vue = require('vue');
var App = require('./App.vue').default;

var app = new Vue({
  el: '#app',
  render: h => h(App)
})

JavaScript
 
var Vue = require('vue');
var App = require('./App.vue').default;
​
var app = new Vue({
  el: '#app',
  render: h => h(App)
})
​

App.vue

<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>

JavaScript
 
<template>
  <div>
    <h1>Hello World!</h1>
  </div>
</template>
​

index.html

<!DOCTYPE html>
<html>
<head>
    ... (meta stuff)
</head>
<body>
    <div id="app"></div>
</body>
    <script src="dist/bundle.js"></script>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<head>
    ... (meta stuff)
</head>
<body>
    <div id="app"></div>
</body>
    <script src="dist/bundle.js"></script>
</html>
​

and lastly the webpack.config.js

const path = require('path');

module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.js'
        }
    },
    watch: true,
    mode: 'development',
    module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          }
        ]
      }
};

JavaScript
 
const path = require('path');
​
module.exports = {
    entry: {
        main: './index.js'
    },
    output: {
        filename: 'bundle.js',
    },
    resolve: {
        extensions: ['.js', '.vue'],
        alias: {
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.js'
        }
    },
    watch: true,
    mode: 'development',
    module: {
        rules: [
          {
            test: /.vue$/,
            loader: 'vue-loader'
          }
        ]
      }
};
​

I run webpack-dev-server --config ./webpack.config.js from npm to get the webpack server running. I also did webpack --config ./webpack.config.js but then I have to run the index.html in chrome and I thought running a server might actually be better for the bundle.

I am aware that a lot of people had similar problems but for some reason none of the solutions I found out there worked for me. I’d really appreciate some help about which direction I should take to fix this situation.

This article might be helpful but I am not sure how to fix my project with it: https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

Edit On Request

dev-Dependencies and dependencies:

{
  "name": "vueTest",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./webpack.config.js",
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-router": "^3.0.1"
  }
}

JavaScript
 
{
  "name": "vueTest",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "build": "webpack --config ./webpack.config.js",
    "dev": "webpack-dev-server --config ./webpack.config.js"
  },
  "license": "MIT",
  "devDependencies": {
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.5.16",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",
    "webpack-dev-server": "^3.1.3"
  },
  "dependencies": {
    "vue": "^2.5.16",
    "vue-router": "^3.0.1"
  }
}
​

Answer

What has worked thanks to thanksd’s comment:

var app = new Vue({
  el: '#app',
  render: function(h) { return h(App); }
})

JavaScript
 
var app = new Vue({
  el: '#app',
  render: function(h) { return h(App); }
})
​

However, it is important to have var App = require('./App.vue').default; especially the default part for the vue files. Hopefully that helps other people as well. I understand that my problem was in the end a simple syntax problem.

Advertisement

Answer