Vue - template or render function not defined

1
votes

Really silly question, but I'm struggling to see what I'm doing wrong;

Created a vue application with webpack, getting the following error now:

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

(found in App at src/App.vue)

I've read the docs: https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only and followed the direction. Here is my setup:

webpack.config.js

module.exports = {
  // This is the "main" 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: "babel-loader",
            // 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: "url-loader",
            // limit => file.size =< 8192 bytes ? DataURI : File
            options: { limit: 8192 }
        }
    ]
  }
}

app.js

import Vue from 'vue';
import App from './App.vue';

const app = new Vue({
  el: "#app",
  template: '<app/>',
  components: { App }
})

App.vue

<template>
<div>
  <div class="message">
    {{ msg }}
  </div>
</div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello from vue-loader!'
    }
  }
}
</script>

<style>
.message {
  color: blue;
}
</style>

And here is my dependencies: 

"devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.1",
    "css-loader": "^0.28.7",
    "file-loader": "^1.1.6",
    "style-loader": "^0.19.1",
    "url-loader": "^0.6.2",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^13.6.2",
    "vue-template-compiler": "^2.5.13",
    "webpack": "^3.10.0",
    "webpack-dev-server": "^2.9.7" },
"dependencies": {
    "gsap": "^1.20.3",
    "vue": "^2.5.13" }

From what I understand I need the standalone version to support templates, which I believe I am using; 'vue$': 'vue/dist/vue.esm.js' ? Anyway not really sure what I am doing wrong and could really use another set of eyes to help!

Thanks in advance for your help. John

3
webpackvue.jsvuejs2

3 Answers

0
votes

Seems like the issue is in you app.js line 6. App should be in caps like so:

import Vue from 'vue'; import App from './App.vue';

const app = new Vue({
  el: "#app",
  template: '<App/>',
  components: { App }
})
0
votes

Fixed the issue for future reference or anyone interested.

The issue was with file-loader & url-loader, I updated these two dependencies and then changed the webpack.config.js config to:

{
  test: /\.(png|jpg|gif)$/,
    use: [
      {
        loader: 'url-loader',
        options: {
          limit: 8192
        }
      }
    ]
  }

Seemed I was reading an old config on the tutorial I was following. It's important to check the most up to date docs/help/readme.

0
votes

try this:

App.js

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