Failed to mount component: template or render function not defined in Vue with Typescript & Webpack,

Question

I get following error when click on "Counter" or "Fetch Data".

[Vue warn]: Failed to mount component: template or render function not defined.                      vendor.js?v=MxNIG8b0Wz6QtAfWhyA0-4CCwZshMscBGmtIBXxKshw:13856 

found in

---> <Anonymous>
       <T> at ClientApp\components\app\app.vue.html
         <Root>

My boot.ts is as following:

import './css/site.css';
import 'bootstrap';
import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const Counter = () => import('./components/counter/counter').then(m => m.default);
const FetchData = () => import('./components/fetchdata/fetchdata');

const routes = [
    { path: '/', component:  require('./components/home/home.vue.html').default },
    { path: '/counter', component: Counter },
    { path: '/fetchdata', component: FetchData }
];

new Vue({
    el: '#app-root',
    router: new VueRouter({ mode: 'history', routes: routes }),
    render: h => h(require('./components/app/app.vue.html').default)
});

My Counter.vue.html is as following

<template>
    <div>
        <h1>Counter</h1>

        <p>This is a simple example of a Vue.js component.</p>

        <p>Current count: <strong>{{ currentcount }}</strong></p>

        <button @click="incrementCounter">Increment</button>
    </div>
</template>

<script src="./counter.ts"></script>

My counter.ts is as following:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

@Component
export default class CounterComponent extends Vue {
    currentcount: number = 0;

    incrementCounter() {
        this.currentcount++;
    }
}

My fetchdata.vue.html is as following:

<template>
    <div>
        <h1>Weather forecast</h1>

        <p>This component demonstrates fetching data from the server.</p>

        <table v-if="forecasts.length" class="table">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in forecasts">
                    <td>{{ item.dateFormatted }}</td>
                    <td>{{ item.temperatureC }}</td>
                    <td>{{ item.temperatureF }}</td>
                    <td>{{ item.summary }}</td>
                </tr>
            </tbody>
        </table>

        <p v-else><em>Loading...</em></p>
    </div>
</template>

<script src="./fetchdata.ts"></script>

My fetchdata.ts is as following:

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

interface WeatherForecast {
    dateFormatted: string;
    temperatureC: number;
    temperatureF: number;
    summary: string;
}

@Component
export default class FetchDataComponent extends Vue {
    forecasts: WeatherForecast[] = [];

    mounted() {
        fetch('api/SampleData/WeatherForecasts')
            .then(response => response.json() as Promise<WeatherForecast[]>)
            .then(data => {
                this.forecasts = data;
            });
    }
}

My NPM packags are as following:

-- vue-loader@14.2.2

-- vue@2.5.16

-- vue-router@3.0.1

-- webpack@4.3.0 (npm list webpack shows -- (empty) . dont know why. But this is not an issue I guess.)

-- typescript@2.8.1

Answer 1

For fetchdata, u'll also need to do what you have done for 'counter'.

const FetchData = () => import('./components/fetchdata/fetchdata').then(m => m.default);

Then, for both of the component. U have called ".ts" files which knows nothing aboout where their ".vue.html" files (templates) are.

shortest resolution is to refer ".vue.html" where you have referenced their ".ts" files. like this.

const FetchData = () => import('./components/fetchdata/fetchdata.vue.html').then(m => m.default);

const Counter= () => import('./components/counter/counter.vue.html').then(m => m.default);