Failed to mount component: template or render function not defined.

Error

Failed to mount component: template or render function not defined. found in <BookingWidget> at src\components\BookingWidget.vue <Root>

index.js:

import Vue from 'vue';
window.axios = require('axios');

// include the polyfill to support older browsers
import 'document-register-element';

// include vue-custom-element plugin to Vue
import VueCustomElement from 'vue-custom-element';
Vue.use(VueCustomElement);

// import and register your component(s)
Vue.customElement('booking-widget', require('./components/BookingWidget.vue').default);

BookingWidget.vue:

<template>

    <div>
        Testing here!
        <p v-if="id">Booking ID: {{ id }}</p>
        <p v-if="event_id">Event ID: {{ event_id }}</p>
    </div>

</template>

<script>
export default {
    props: {
        id: {
            type: Integer, default: null
        },
        event_id: {
            type: Integer, default: null
        }
    },
    mounted() {
       console.log('Booking Widget - Component Loaded!');
    },
}
</script>

webpack.mix.js (Using Laravel mix)

let mix = require('laravel-mix');
let webpack = require('webpack');
let path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

mix.setPublicPath('dist')
    .webpackConfig({
        devtool: 'source-map',
        resolve: {
            extensions: ['.js', '.vue'],
            alias: {
                'vue$': 'vue/dist/vue.common.js'
            }
        },
        plugins: [
            // make sure to include the plugin for the magic
            new VueLoaderPlugin()
        ],
        module: {
            rules: [
                {
                    test: /\.vue$/,
                    use: 'vue-loader'
                },
                {
                    test: /\.js$/,
                    use: 'babel-loader'
                }
            ]
        }
    });

mix.js('src/index.js', 'dist/widget.js')
    .minify('dist/widget.js');

package.json:

{
  "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": "npm run development -- --watch",
    "watch-poll": "npm 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 --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.18",
    "cross-env": "^5.1",
    "document-register-element": "^1.8.1",
    "laravel-mix": "^2.0",
    "moment": "^2.22.1",
    "uglify-js": "git://github.com/mishoo/UglifyJS2.git#harmony",
    "vue": "^2.5.7",
    "vue-custom-element": "^3.0.6",
    "vue-loader": "^15.1.0",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "^2.5.16",
    "babel-plugin-syntax-dynamic-import": "^6.18.0"
  }
}

[Braunson]

@karol-f Hmm I’ve updated vue-template-compiler version to match that of Vue, and downgraded to vue-loader@14 and it seems to have resolved the issue, thank you!

[karol-f]

Hi @priyag597, if you’ve found issue with vue-custom-element, please open separate issue. I can see that your comment is not related.