{"action":"created","issue":{"url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/117","repository_url":"https://api.github.com/repos/karol-f/vue-custom-element","labels_url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/117/labels{/name}","comments_url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/117/comments","events_url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/117/events","html_url":"https://github.com/karol-f/vue-custom-element/issues/117","id":324648067,"number":117,"title":"Failed to mount component: template or render function not defined.","user":{"login":"Braunson","id":577273,"avatar_url":"https://avatars2.githubusercontent.com/u/577273?v=4","gravatar_id":"","url":"https://api.github.com/users/Braunson","html_url":"https://github.com/Braunson","followers_url":"https://api.github.com/users/Braunson/followers","following_url":"https://api.github.com/users/Braunson/following{/other_user}","gists_url":"https://api.github.com/users/Braunson/gists{/gist_id}","starred_url":"https://api.github.com/users/Braunson/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Braunson/subscriptions","organizations_url":"https://api.github.com/users/Braunson/orgs","repos_url":"https://api.github.com/users/Braunson/repos","events_url":"https://api.github.com/users/Braunson/events{/privacy}","received_events_url":"https://api.github.com/users/Braunson/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":3,"created_at":"2018-05-19T17:55:52Z","updated_at":"2018-05-20T19:45:48Z","closed_at":"2018-05-20T08:03:17Z","author_association":"NONE","body":"### Error\r\n\r\n`Failed to mount component: template or render function not defined. found in <BookingWidget> at src\\components\\BookingWidget.vue <Root>`\r\n\r\n**index.js**:\r\n```js\r\nimport Vue from 'vue';\r\nwindow.axios = require('axios');\r\n\r\n// include the polyfill to support older browsers\r\nimport 'document-register-element';\r\n\r\n// include vue-custom-element plugin to Vue\r\nimport VueCustomElement from 'vue-custom-element';\r\nVue.use(VueCustomElement);\r\n\r\n// import and register your component(s)\r\nVue.customElement('booking-widget', require('./components/BookingWidget.vue').default);\r\n```\r\n\r\n**BookingWidget.vue**:\r\n```vue\r\n<template>\r\n\r\n    <div>\r\n        Testing here!\r\n        <p v-if=\"id\">Booking ID: {{ id }}</p>\r\n        <p v-if=\"event_id\">Event ID: {{ event_id }}</p>\r\n    </div>\r\n\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n    props: {\r\n        id: {\r\n            type: Integer, default: null\r\n        },\r\n        event_id: {\r\n            type: Integer, default: null\r\n        }\r\n    },\r\n    mounted() {\r\n       console.log('Booking Widget - Component Loaded!');\r\n    },\r\n}\r\n</script>\r\n```\r\n\r\n**webpack.mix.js** (Using Laravel mix)\r\n```js\r\nlet mix = require('laravel-mix');\r\nlet webpack = require('webpack');\r\nlet path = require('path');\r\nconst VueLoaderPlugin = require('vue-loader/lib/plugin');\r\n\r\nmix.setPublicPath('dist')\r\n    .webpackConfig({\r\n        devtool: 'source-map',\r\n        resolve: {\r\n            extensions: ['.js', '.vue'],\r\n            alias: {\r\n                'vue$': 'vue/dist/vue.common.js'\r\n            }\r\n        },\r\n        plugins: [\r\n            // make sure to include the plugin for the magic\r\n            new VueLoaderPlugin()\r\n        ],\r\n        module: {\r\n            rules: [\r\n                {\r\n                    test: /\\.vue$/,\r\n                    use: 'vue-loader'\r\n                },\r\n                {\r\n                    test: /\\.js$/,\r\n                    use: 'babel-loader'\r\n                }\r\n            ]\r\n        }\r\n    });\r\n\r\nmix.js('src/index.js', 'dist/widget.js')\r\n    .minify('dist/widget.js');\r\n```\r\n\r\n**package.json**:\r\n```json\r\n{\r\n  \"scripts\": {\r\n    \"dev\": \"npm run development\",\r\n    \"development\": \"cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js\",\r\n    \"watch\": \"npm run development -- --watch\",\r\n    \"watch-poll\": \"npm run watch -- --watch-poll\",\r\n    \"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\",\r\n    \"prod\": \"npm run production\",\r\n    \"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\"\r\n  },\r\n  \"devDependencies\": {\r\n    \"axios\": \"^0.18\",\r\n    \"cross-env\": \"^5.1\",\r\n    \"document-register-element\": \"^1.8.1\",\r\n    \"laravel-mix\": \"^2.0\",\r\n    \"moment\": \"^2.22.1\",\r\n    \"uglify-js\": \"git://github.com/mishoo/UglifyJS2.git#harmony\",\r\n    \"vue\": \"^2.5.7\",\r\n    \"vue-custom-element\": \"^3.0.6\",\r\n    \"vue-loader\": \"^15.1.0\",\r\n    \"vue-style-loader\": \"^4.1.0\",\r\n    \"vue-template-compiler\": \"^2.5.16\",\r\n    \"babel-plugin-syntax-dynamic-import\": \"^6.18.0\"\r\n  }\r\n}\r\n```"},"comment":{"url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/comments/390506399","html_url":"https://github.com/karol-f/vue-custom-element/issues/117#issuecomment-390506399","issue_url":"https://api.github.com/repos/karol-f/vue-custom-element/issues/117","id":390506399,"user":{"login":"karol-f","id":893082,"avatar_url":"https://avatars2.githubusercontent.com/u/893082?v=4","gravatar_id":"","url":"https://api.github.com/users/karol-f","html_url":"https://github.com/karol-f","followers_url":"https://api.github.com/users/karol-f/followers","following_url":"https://api.github.com/users/karol-f/following{/other_user}","gists_url":"https://api.github.com/users/karol-f/gists{/gist_id}","starred_url":"https://api.github.com/users/karol-f/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/karol-f/subscriptions","organizations_url":"https://api.github.com/users/karol-f/orgs","repos_url":"https://api.github.com/users/karol-f/repos","events_url":"https://api.github.com/users/karol-f/events{/privacy}","received_events_url":"https://api.github.com/users/karol-f/received_events","type":"User","site_admin":false},"created_at":"2018-05-20T19:45:48Z","updated_at":"2018-05-20T19:45:48Z","author_association":"OWNER","body":"Also I can see that you are using `vue-template-compiler` with different version that `Vue`. That might be problem. "}}
{"actor":{"display_login":"karol-f"}}