vue.js - Typescript Vue: Failed to mount component: template or render function not defined

Question

everyone I wanted to add typescript to my vue project and it now compiles without an error, but as soon as I open the page, an error message in the console appears:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <App> at src/App.vue
       <Root>

This is my main.ts

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store/store'

// @ts-ignore
import VueFormulate from '@braid/vue-formulate'

import api from './api/api'

import './assets/scss/app.scss'

import './registerServiceWorker.ts'

Vue.config.productionTip = false
// @ts-ignore
Vue.$api = api;
Object.defineProperty(Vue.prototype, '$api', {
    get() {
        return api
    }
})

Vue.use(VueFormulate)

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

And this is my App.vue Yes, vue-class-components is installed

<template>
    <div class="container-fluid container-lg container-xl" id="app">
        <router-view></router-view>
    </div>
</template>

<script lang="ts">

import Component from "vue-class-component";
import Vue from "vue";

@Component
export default class App extends Vue{
    created(){
        console.log("foo");
    }
}

</script>

I actually copied the structure of the component directly from the documentation, so I assume, that my error must be somewhere in my main.ts. Also note that it is a vue2 project, so no problems with vue3.

question from:https://stackoverflow.com/questions/65844137/typescript-vue-failed-to-mount-component-template-or-render-function-not-defin

Answer 1

In fact, the displayed configuration wasn't wrong. I recreated a minimal working example, copied the exact same files and it still did not work.

There was a misconfiguration somewhere in the toolchain, I reinstalled the project with the vue cli, copied the original files back in and everything worked.