vue.common.js?e881:478 [Vue warn]: Failed to mount component: template or render function not defined

Published 2 months ago by prashant.godhwani

I get the following error on the console while trying to load a template using Vue on laravel. I don't know whats wrong as I am a total beginner. I tried all the solutions available but nothing seems to resolve. I want to load the VideoUpload.vue on the upload.blade.php that is under an "app" div. Kindly Help !!

The error

vue.common.js?e881:478 [Vue warn]: Failed to mount component: template or render function not defined.

found in

    ---> <VideoUpload>
           <Root>

VideoUpload.vue

<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload</div>

                    <div class="panel-body">
                       ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

app.js


/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

 require('./bootstrap');
window.Vue = require('vue');

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

 Vue.component('video-upload', require('./components/VideoUpload.vue'));

const app = new Vue({
    el: '#app',
});

package.json

{
  "private": true,
  "scripts": {
    "dev": "npm run development",
    "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "n

    pm run watch -- --watch-poll",
        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
        "prod": "npm run production",
        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
      },
      "devDependencies": {
        "axios": "^0.16.2",
        "bootstrap-sass": "^3.3.7",
        "cross-env": "^5.0.1",
        "gulp": "^3.9.1",
        "jquery": "^3.1.1",
        "laravel-elixir": "^6.0.0-16",
        "laravel-elixir-vue-2": "^0.3.0",
        "laravel-elixir-webpack-official": "^1.0.10",
        "laravel-mix": "^1.5.0",
        "lodash": "^4.17.4",
        "vue": "^2.4.4",
        "vue-resource": "^0.9.3"
      }
    }
Best Answer (As Selected By prashant.godhwani)
tykus

Delete the node_modules directory and the package-lock.json file and re-run npm install

tykus
tykus
2 months ago (389,960 XP)

Do you have <template> tags surrounding your HTML in the VideoUpload Vue component - it is difficult to see from your OP

prashant.godhwani

yes they are enclosed in template tags

tykus
tykus
2 months ago (389,960 XP)

Can you share the VideoUpload component?

prashant.godhwani
<template>
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <div class="panel panel-default">
                    <div class="panel-heading">Upload</div>

                    <div class="panel-body">
                       ...
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>
prashant.godhwani

@tykus I even formatted the question. Now I guess, its fine.

tykus
tykus
2 months ago (389,960 XP)

That looks okay, so maybe the problem is you have a runtime-only version of vue.js; which cannot compile templates. Is Vue working correctly otherwise?

Have a look here for the different builds of Vue.js https://vuejs.org/v2/guide/installation.html#Explanation-of-Different-Builds

prashant.godhwani

is there a way to download a fresh installation of standalone version? I am new and I don't know much

prashant.godhwani

@tykus I even added 'vue$': 'vue/dist/vue.common.js' to WebpackConfig.js

let webpack = require('webpack');

let webpackDefaultConfig = require('./webpack-default');
let webpackEntry = require('./webpack-entry');
let webpackRules = require('./webpack-rules');
let webpackPlugins = require('./webpack-plugins');

process.noDeprecation = true;

class WebpackConfig {
    /**
     * Create a new instance.
     */
    constructor() {
        this.webpackConfig = webpackDefaultConfig();
    }


    /**
     * Build the Webpack configuration object.
     */
    build() {
        this.buildEntry()
            .buildOutput()
            .buildRules()
            .buildPlugins()
            .buildResolving()
            .mergeCustomConfig();

        Mix.dispatch('configReady', this.webpackConfig);

        return this.webpackConfig;
    }


    /**
     * Build the entry object.
     */
    buildEntry() {
        let { entry, extractions } = webpackEntry();

        this.webpackConfig.entry = entry;

        // If we're extracting any vendor libraries, then we
        // need to add the CommonChunksPlugin to strip out
        // all relevant code into its own file.
        if (extractions.length) {
            this.webpackConfig.plugins.push(
                new webpack.optimize.CommonsChunkPlugin({
                    names: extractions,
                    minChunks: Infinity
                })
            );
        }

        return this;
    }


    /**
     * Build the output object.
     */
    buildOutput() {
         let http = process.argv.includes('--https') ? 'https' : 'http';

        this.webpackConfig.output = {
            path: path.resolve(Mix.isUsing('hmr') ? '/' : Config.publicPath),
            filename: '[name].js',
            chunkFilename: '[name].js',
            publicPath: Mix.isUsing('hmr') ? (http + '://localhost:8080/') : ''
        };

        return this;
    }


    /**
     * Build the rules array.
     */
    buildRules() {
        let { rules, extractPlugins } = webpackRules();

        this.webpackConfig.module.rules = this.webpackConfig.module.rules.concat(rules);
        this.webpackConfig.plugins = this.webpackConfig.plugins.concat(extractPlugins);

        return this;
    }


    /**
     * Build the plugins array.
     */
    buildPlugins() {
        this.webpackConfig.plugins = this.webpackConfig.plugins.concat(
            webpackPlugins()
        );

        return this;
    }


    /**
     * Build the resolve object.
     */
    buildResolving() {
        let extensions = ['*', '.js', '.jsx', '.vue'];
        
        let buildFile = 'vue/dist/vue.common.js';

        if (Config.typeScript) {
            extensions.push('.ts', '.tsx');
            
            buildFile = 'vue/dist/vue.esm.js';
        }

        this.webpackConfig.resolve = {
            extensions,

            alias: {
                'vue$': buildFile,
                'vue$': 'vue/dist/vue.common.js'
            }
        };

        return this;
    }


    /**
     * Merge the user's custom Webpack configuration.
     */
    mergeCustomConfig() {
        if (Config.webpackConfig) {
            this.webpackConfig = require('webpack-merge').smart(
                this.webpackConfig, Config.webpackConfig
            );
        }
    }
}

module.exports = WebpackConfig;
tykus
tykus
2 months ago (389,960 XP)

I don't know why this is happening, but just wondering why you have laravel elixir and laravel mix installed?

Can you remove the Laravel Elixir dependencies from package.json; and only use Laravel Mix? For a default installation, you should not need to modify a webpack config.

prashant.godhwani

@tykus should I remove all these?

"laravel-elixir": "^6.0.0-16",
    "laravel-elixir-vue-2": "^0.3.0",
    "laravel-elixir-webpack-official": "^1.0.10",

tykus
tykus
2 months ago (389,960 XP)

Yes. Laravel Mix replaces Elixir

prashant.godhwani

@tykus after removing the packages I ran npm install. I receive the following errors while running gulp

E:\xampp\htdocs\viewflix>gulp
module.js:471
    throw err;
    ^

Error: Cannot find module 'laravel-elixir'
    at Function.Module._resolveFilename (module.js:469:15)
    at Function.Module._load (module.js:417:25)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (E:\xampp\htdocs\viewflix\gulpfile.js:1:78)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
tykus
tykus
2 months ago (389,960 XP)

Delete the node_modules directory and the package-lock.json file and re-run npm install

Please sign in or create an account to participate in this conversation.