vuejs / vueify

Browserify transform for single-file Vue components
MIT License
1.17k stars 152 forks source link

Failed to mount component: template or render function not defined. (found in root instance) #153

Closed jerricco closed 7 years ago

jerricco commented 7 years ago

Hi guys, I've got a bit of a familiar problem, keeping getting the error: [Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

Here's my webpack config:

var config_array = [] //Provide an array of configs for webpack, for multiple output paths
var webpack_config = { //Global webpack config
    devtool: 'source-map',
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery",
            "window.jQuery": "jquery"
        })
    ],
    module: {
        loaders: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: path.join(__dirname, "./../../node_modules"),
            query: {
                presets: ['es2015'],  
                plugins: ['transform-runtime'], 
            }
        }]
    },
    resolve: {
        alias: {'vue$': "./../../node_modules/vue/dist/vue.js"}
    },
    debug: true
}

I'm passing an array of configs so that each individual page 'controller' file can be transpiled with all of its depenencies, and load on their respective pages. Webpack bundles successfully every time but I can no longer seem to use el: '#app' to mount the root instance. Truth be told also, I am not sure whether I am running the standalone build or not, since nothing changes if I remove the resolve.

For the purpose of testing, the vue instance I am working with is as simple as can be:

var vm = new Vue({
  el: '#app',
  mounted: function() {
    console.log('mounted')
  }
})

Some digging showed that I can require a html file with webpack and bind it to a template key in the instance, or use the render function. Unfortunately, this is not easily possible in my case since all the template files are .cfm files and many I am working with still require coldfusion to render some content. I understand it may be that I have to transfer all my root instances into .vue templates, but was hoping there was still a way Vue could simply bind to the existing DOM, as it does without using webpack.

Also, switching to using require('vue/dist/vue') removes this error, but as soon as I add a Vuex store, it brings some weird errors about it being undefined, despite being able to output my store object in the console, and I know others have had issues importing Vue this way.

Please let me know if there's any more code or context I need to supply, the old brain is a bit scattered after so much googling and I may have missed something obvious -__-

jerricco commented 7 years ago

Eurgh, seems the excessive googling really did fry my brain. Not only did I post this in the wrong repo issue (I initially meant to post in Vue's issues, and probably should have just posted in the forum), but it was just a spelling mistake (module: { instead of modules: { ) in the end.

Lack of sleep and too much coffee, sorry guys.