Vue.js and Webpack - Failed to mount component: template or render function not defined

Question

I keep getting the following error for some global components that I have:

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

---> <Paginator>
        <Root>

This is what I have in package.json:

{
    "version": "1.0.0",
    "scripts": {
       "dev": "cross-env NODE_ENV=development webpack",
        "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
     },
     "dependencies": {
         "vue": "^2.4.4"
      },
      "browserslist": [
          "> 1%",
          "last 2 versions",
          "not ie <= 8"
      ],
      "devDependencies": {
            "babel-core": "^6.26.0",
            "babel-loader": "^7.1.2",
             "babel-polyfill": "^6.23.0",
             "babel-preset-es2015": "^6.24.1",
             "babel-preset-stage-2": "^6.0.0",
             "babel-preset-vue-app": "^1.2.0",
             "babel-plugin-transform-runtime": "^6.0.0",
             "cross-env": "^5.0.5",
             "css-loader": "^0.28.7",
             "file-loader": "^1.1.4",
             "fs": "^0.0.1-security",
             "node-sass": "^4.5.3",
             "sass-loader": "^6.0.6",
             "vue-loader": "^13.0.5",
              "vue-template-compiler": "^2.4.4",
              "webpack": "^3.6.0",
              "webpack-dev-server": "^2.9.1"
           }
      }

In webpack.config i have the following defined:

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
 },

And this is my main js file:

import Vue from 'vue';

Vue.component('paginator', require('./components/Paginator.vue'));

var vm = new Vue({
     el: '#root',
     data: {}
});

html:

<div id="root>
        <paginator v-bind:total-items="totalItems" v-bind:page-size="query.pageSize" v-bind:page="query.page" v-on:pagechanged="onPageChange"></paginator>

</div>

any ideas why im getting this error?

When I change the code as follows is seems to work however I want to register the paginator as a global component:

import Vue from 'vue';
import Paginator from './components/Paginator.vue';

var vm = new Vue({
     el: '#root',
     components: {
         'paginator': Paginator
     },
     data: {}
});

This is the paginator component:

 <template>
    <div>
        <div >
            <nav>
                <ul class="pagination">
                    ...
                </ul>
            </nav>
        </div>
    </div>



 </template>


 <script>


 export default {

        props: ['totalItems', 'pageSize', 'page'],

        data: function () {

            return {
                currentPage: 1,
            }

        },
        computed: {
            pages: function () {
                    this.currentPage = this.page;
                    var pageArray = [];
                    var pagesCount = Math.ceil(this.totalItems / this.pageSize); 

                    for (var i = 1; i <= pagesCount; i++)
                        pageArray.push(i);

                    return pageArray;
               }
        },

        methods: {

                changePage: function (page){

                    this.currentPage = page; 
                    this.$emit('pagechanged', page);
                },

                previous: function (){
                    if (this.currentPage == 1)
                        return;

                    this.currentPage--;

                    this.$emit('pagechanged', this.currentPage);
                },

                next: function () {
                    if (this.currentPage == this.pages.length)
                        return; 

                    this.currentPage++;

                    this.$emit('pagechanged', this.currentPage);
                }
            },
    }

Answer 1

I believe this line is the issue - require inside the component declaration hasn't ended well for me when using it (although I've not looked into why). Edit: See @DecadeMoon answer for info on this.

Vue.component('paginator', require('./components/Paginator.vue'));

Recommended way:

import Paginator from './components/Paginator.vue'
Vue.component('paginator', Paginator);

You can also do one of the following which will make webpack split the module into a separate file download asynchronously (this can be useful for large components)

Option 1:

Vue.component('paginator', () => import('./components/Paginator.vue'));

Option 2:

I have a load function that wraps this as it allows me to pass a string and wrap the directory without having to type it multiple times but this is a simple version of that function I use:

function load (component) {
  return () => import(component)
}

so it would become:

Vue.component('paginator', load('./components/Paginator.vue'));

Answer 2

This is a consequence of the way Webpack combines require (CommonJS) and import (ES6) module import styles.

I always recommend using ES6-style import syntax.

If you must use require, then you will need to select the default import as follows:

Vue.component('paginator', require('./components/Paginator.vue').default);
                                                                ^^^^^^^^

I recommend using ES6 import syntax instead (it's a standardized, non-webpack-specific syntax):

import Paginator from './components/Paginator.vue';
Vue.component('paginator', Paginator);

The reason why import() syntax works is because of this issue. Only use import() if you want the module to be split into a separate file and downloaded asynchronously by Webpack.