title: Vue - template or render function not defined
body: <p>Really silly question, but I'm struggling to see what I'm doing wrong;</p>
  <p>Created a vue application with webpack, getting the following error now:</p>
  <blockquote>
  <p>&quot;[Vue warn]: Failed to mount component: template or render function not defined.&quot;</p>
  </blockquote>
  <p>(found in App at src/App.vue)</p>
  <p>I've read the docs: <a href="https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only</a> and followed the direction. Here is my setup:</p>
  <p>###<strong>webpack.config.js</strong>##</p>
  <pre><code>module.exports = {
    // This is the &quot;main&quot; file which should include all other modules
    entry: './src/app.js',
    // Where should the compiled file go?
    output: {
      filename: './dist/bundle.js'
    },
    resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    },
      extensions: ['*', '.js', '.vue', '.json']
  },
    module: {
      // Special compilation rules
      rules: [
          // Configure vue-loader and Babel loader to compile ES6.
        {
              // Use vue loader
              test: /\.vue$/,
              loader: 'vue-loader'
          },
          {
              // Compiling ES2015 with Babel
            // Ask webpack to check: If this file ends with .js, then apply some transforms
              test: /\.js$/, // /\.esm.js$/
              // Transform it with babel
              loader: &quot;babel-loader&quot;,
              // don't transform node_modules folder (which don't need to be compiled)
              exclude: /node_modules/
          },
          {
              // load assets (images)
            // Ask webpack to check: If this file ends with .png, .jpg, ttf, etc, then apply some transforms
              test: /\.(png|jpeg|ttf|...)$/,
              // Load it
              loader: &quot;url-loader&quot;,
              // limit =&gt; file.size =&lt; 8192 bytes ? DataURI : File
              options: { limit: 8192 }
          }
      ]
    }
  }
  </code></pre>
  <p>###<strong>app.js</strong>##</p>
  <pre><code>import Vue from 'vue';
  import App from './App.vue';
  
  const app = new Vue({
    el: &quot;#app&quot;,
    template: '&lt;app/&gt;',
    components: { App }
  })
  </code></pre>
  <p>###<strong>App.vue</strong>##</p>
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;div class=&quot;message&quot;&gt;
      {{ msg }}
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    data () {
      return {
        msg: 'Hello from vue-loader!'
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .message {
    color: blue;
  }
  &lt;/style&gt;
  </code></pre>
  <p>And here is my dependencies:</p>
  <blockquote>
  <pre><code>&quot;devDependencies&quot;: {
      &quot;babel-core&quot;: &quot;^6.26.0&quot;,
      &quot;babel-loader&quot;: &quot;^7.1.2&quot;,
      &quot;babel-preset-env&quot;: &quot;^1.6.1&quot;,
      &quot;css-loader&quot;: &quot;^0.28.7&quot;,
      &quot;file-loader&quot;: &quot;^1.1.6&quot;,
      &quot;style-loader&quot;: &quot;^0.19.1&quot;,
      &quot;url-loader&quot;: &quot;^0.6.2&quot;,
      &quot;vue-html-loader&quot;: &quot;^1.2.4&quot;,
      &quot;vue-loader&quot;: &quot;^13.6.2&quot;,
      &quot;vue-template-compiler&quot;: &quot;^2.5.13&quot;,
      &quot;webpack&quot;: &quot;^3.10.0&quot;,
      &quot;webpack-dev-server&quot;: &quot;^2.9.7&quot; },
  &quot;dependencies&quot;: {
      &quot;gsap&quot;: &quot;^1.20.3&quot;,
      &quot;vue&quot;: &quot;^2.5.13&quot; }
  </code></pre>
  </blockquote>
  <p>From what I understand I need the standalone version to support templates, which I believe I am using; <strong>'vue$': 'vue/dist/vue.esm.js'</strong> ? Anyway not really sure what I am doing wrong and could really use another set of eyes to help!</p>
  <p>Thanks in advance for your help.
  John</p>