TS2769: No overload matches this call?

Question

typescript

I'm trying to integrate the template decorator using the example

, but it gives an error

spoiler

ERROR in /var/www/site/src/app.ts
    ./src/app.ts
    [tsl] ERROR in /var/www/site/src/app.ts(20,2)
TS2769: No overload matches this call.
    Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>): ComponentOptions<...>', gave the following error.
    Type 'typeof App' has no properties in common with type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'.
    Overload 2 of 2, '(component: typeof import("/var/www/site/node_modules/vue/types/index")): typeof import("/var/www/site/node_modules/vue/types/index")', gave the following error.
    Argument of type 'typeof App' is not assignable to parameter of type 'typeof import("/var/www/site/node_modules/vue/types/index")'.
    Property 'Vue' is missing in type 'typeof App' but required in type 'typeof import("/var/www/site/node_modules/vue/types/index")'.

    ERROR in /var/www/site/src/components/app/App.ts
    [tsl] ERROR in /var/www/site/src/components/app/App.ts(8,2)
TS2769: No overload matches this call.
    Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>): ComponentOptions<...>', gave the following error.
    Value of type 'typeof App' has no properties in common with type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>'. Did you mean to call it?
    Overload 2 of 2, '(component: typeof import("/var/www/site/node_modules/vue/types/index")): typeof import("/var/www/site/node_modules/vue/types/index")', gave the following error.
    Argument of type 'typeof App' is not assignable to parameter of type 'typeof import("/var/www/site/node_modules/vue/types/index")'.
    Property 'Vue' is missing in type 'typeof App' but required in type 'typeof import("/var/www/site/node_modules/vue/types/index")'.

console

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

ts, webpack configs, etc. are identical

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "noImplicitAny": true,
    "sourceMap": false,
    "strictNullChecks": true,
    "typeRoots": [
      "./node_modules/@types"
    ],
    "lib": [
      "dom",
      "es5",
      "es2015"
    ],
    "noEmitHelpers": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "allowSyntheticDefaultImports": true,
    "emitDecoratorMetadata": true

like everything else, main.ts, app.ts templates and so on, but apparently I missed a small detail somewhere.

Suspicion of a tire

declare module '*.html' {
    import Vue = require('vue');

    interface WithRender {
        <V extends Vue>(options: Vue.ComponentOptions<V>): Vue.ComponentOptions<V>

        <V extends typeof Vue>(component: V): V
    }

    const withRender: WithRender;
    export = withRender
}

or some additional config, because package versions locally are already much higher

I also tried using the tempalte parameter

// @Template
@Component<Home>({
    template: require('./Home.html'),

gives an error message

Uncaught TypeError: vm.$options.template.charAt is not a function
    at mountComponent (vue.runtime.esm.js?2b0e:4027)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at eval (main.ts?794f:38)
    at Object../src/main.ts (main.js:177)
    at __webpack_require__ (main.js:80)
    at Object.0 (main.js:200)
    at __webpack_require__ (main.js:80)
    at checkDeferredModules (main.js:46)
    at main.js:153
    at main.js:156

Here is another guide that I tried to use , it is invalid.
I also found git ishshus with a bunch of links back and forth, but to no avail.
Tried to upgrade packages

"vue": "^2.6.11",
    "vue-class-component": "^7.2.3",
    "vue-template-loader": "^1.1.0",
    "vuex-module-decorators": "^0.17.0",
    "vue-property-decorator": "^8.4.2",

to no avail, only one more error began to knock out

[tsl] ERROR in /var/www/site/src/components/app/App.ts(8,1)
      TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<...>>' is missing the following properties from type 'typeof App': prototype, extend, nextTick, set, and 10 more.

Noticed that it

declare module '*.html' {
    import Vue = require('vue');
    import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue'
  interface WithRender {
        <V extends Vue, U extends Vue.ComponentOptions<V> | Vue.FunctionalComponentOptions>(options: U): U
...

@WithRender
@Component({
    router,
})
class Main extends Vue {
    // constructor() {
}

const vm = new Main();

vm.$mount('#app');

the assembly passes, but the render does not work, it gives another error in the browser console

vue.runtime.esm.js?2b0e:619 [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build.

(found in <Root>)

If add

@WithRender
@Component({
    render: h => h(Main), //  Это
    router,
})
class Main extends Vue {

That will be another mistake.

vue.runtime.esm.js?2b0e:4484 Uncaught RangeError: Maximum call stack size exceeded
    at Watcher.get (vue.runtime.esm.js?2b0e:4493)
    at new Watcher (vue.runtime.esm.js?2b0e:4468)
    at mountComponent (vue.runtime.esm.js?2b0e:4073)
    at VueComponent.Vue.$mount (vue.runtime.esm.js?2b0e:8415)
    at init (vue.runtime.esm.js?2b0e:3118)
    at createComponent (vue.runtime.esm.js?2b0e:5978)
    at createElm (vue.runtime.esm.js?2b0e:5925)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6477)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3945)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)

If you add
render: h => h(),
this, what will be rendered,
<!---->
that is, < is div id="app"></div>replaced by an empty space.

If you remove render:it altogether and leave only .$mount('#app');the #app div will be replaced with this

<!--function (a, b, c, d) { return createElement(vm, a, b, c, d, true); }-->

and error

You are using the runtime-only build of Vue where the template compiler is not available.

Answer 1

What I understood after almost 2 days of searching why it doesn’t work is that 80% of the guides and examples on git are outdated due to the BC overwork.
Here is an example of a non-working option, I don’t know why it doesn’t work

import Template from '@/index.html'


@Template
@Component({
    router,
})
class Main extends Vue {
}

const vm = new Main();
vm.$mount('#app');

this is how it was supposed to be, I don’t know why exactly, it seemed according to the guides and some demo projects that it works for them, maybe the old versions of the tires could really parse

import * as Template from '@/index.html'

@Template

Here is the tire

declare module '*.html' {
    // import Vue = require('vue'); // так будет выкидывать  ошибки, СЛОМАНО

    import Vue, {ComponentOptions, FunctionalComponentOptions} from 'vue';

    interface WithRender {
        <V extends Vue, U extends ComponentOptions<V> | FunctionalComponentOptions>(options: U): U // для устранения BC используем 2 типа.

        <V extends typeof Vue>(component: V): V
    }

    const withRender: WithRender;
    export = withRender
}

I made it work by reading dozens of articles and guides, github issues and analyzing demo projects.
If a similar situation arose when trying to remove .vue templates and use Angular style, you should look for errors in these files

1. app.ts aka amain.ts or index.ts which is the entry_point for webpack.
   
2. tsconfig.json
   
3. package.json
   
4. yarn.lock and node_modules - these should be removed when upgrading packages
   
5. webpack.config.json
   
6. html.shim.d.ts
   

less likely

1. index.html - which parses your nginx or apache server
   
2. index.html - which is specified for the main MainApp which we .$mount('#app'); it is shown in my answer above
   
3. html.shim.d.ts - you may be using an old version
   
4. your component .ts file
   

At first I had version conflicts, bus and vue are old and decorators are new.
In general, dozens of nuances, and errors, as always, pointed to hell.