Error TS2345 when import implemented in TypeScript Vue component outside of project directory (experimentally proved that not because of Vue libraries)

[TokugawaTakeshi]

This issue is about TypeScript bug, or the feature that was not documented.

Before open this issue, I asked about this problem in Stack Overflow on three languages, spent three Stack Overflow bounties and also also opened issue in vue-property-decorator repository (I will append links). Nobody could make some explanation about this error (for the moment when I wrote this issue).

---

I got below TypeScript error when tried to use side Vue component implemented in TypeScript (outside of project directory):

TS2345: Argument of type '{ template: string; components: { SimpleCheckbox: typeof SimpleCheckbox; }; }' 
is not assignable to parameter of type 'VueClass<Vue>'.
Object literal may only specify known properties, and 'template' does not exist in type 
'VueClass<Vue>'.

My WebStorm IDE did not detect this error; in was outputted in console when I ran Webpack (TypeScript loader is ts-loader).

The error occurs in:

import { Vue, Component, Prop } from 'vue-property-decorator';
import template from './SkipProjectInitializationStepPanel.pug';
import SimpleCheckbox from './../../../../ui-kit-libary-in-development/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue';

// here !
@Component({ template, components: { SimpleCheckbox } })
export default class SkipProjectInitializationStepPanel extends Vue {
  @Prop({ type: String, required: true }) private readonly text!: string;
}

As follows from ui-kit-libary-in-development name, it is not npm-dependency yet, so it is not inside node_modules for now.

It was exclusively TypeScript error; although ts-loader casts this error, Webpack builds my project and compiled JavaScript works correctly. This error will disappear if to do one of below actions:

• Move SimpleCheckbox.vue to same directory as SkipProjectInitializationStepPanel.ts and import it as import SimpleCheckbox from './SimpleCheckbox.vue';
• Remove SimpleCheckbox from @Component({ template, components: { SimpleCheckbox } }) and leave only @Component({ template, components: {} }) (off course, SimpleCheckbox will no be rendered in this case, but I had to do this experiment).
• Move ui-kit-libary-in-development to node_modules of main project and remove node_modules from ui-kit-libary-in-development (if don't remove, nothing will change).

Unfortunately, I could not reproduce this problem. For some reason below try of reproduction works without errors:

MainProject/src/Application.vue

<template lang="pug">
  PageOne
</template>

<script lang="ts">
  import { Vue, Component } from 'vue-property-decorator';
  import PageOne from './PageComponents/PageOne'

  @Component({ components: { PageOne }})
  export default class Application extends Vue {
    private created(): void {
      console.log('Done.');
    }
  }
</script>

MainProject/src/PageComponents/PageOne.ts

import { Vue, Component, Prop } from 'vue-property-decorator';
import template from './PageOne.pug';
import Button from './../../../UiKitLibraryStillInDevelopment/UiComponents/Buttons/Button.vue';

@Component({ template, components: { Button } })
export default class SkipProjectInitializationStepPanel extends Vue {}

MainProject/src/PageComponents/PageOne.pug

.RootElement
  Button(:text="'Click me'")

ui-kit-libary-in-development/UiComponents/Buttons/Button.vue

<template lang="pug">
  button {{ text }}
</template>

<script lang="ts">
  import { Vue, Component, Prop } from 'vue-property-decorator';

  @Component
  export default class SimpleCheckbox extends Vue {
    @Prop({ type: String, required: true }) private readonly text!: string;

    private created(): void {
      console.log('OK!');
      console.log(this.$props);
    }
  }
</script>

All clues what I found is this comment in issue Setting components in Component decorator causes Typescript 2.4 error:

Side components should add .d.ts for it to work AFAIK. Nick Messing

From this clue, the following question arising:

• Where I should to create .d.ts - in my main project or dependency? Most likely in main project, but if it so, why I can import side components in third-party libraries like vuetify? Because there is .d.ts there!
• How I need to declare new Vue component in .d.ts? Some tutorial or example?

---

Because I could not reproduce this problem and my project still is raw (has not got commercial value yet), I can share it by Google Drive (link for downloading zip archive). All node_modules are included, just run npm run developmentBuild in main-project directory.

If you are worry about viruses, you can also get source files in this repository, but because it is does not include node_modules, for reproducing it's required to execute npm install in both main-project and dependency directories.

---

Links:

• Related question in English Stack Overflow
• Related question in Japanese Stack Overflow
• Related question in Russian Stack Overflow
• Issue in vue-property-decorator repository

---

TypeScript Version: ^3.7.0-dev.20190906

Error occurred, but error code has been changed:

 TS2769: No overload matches this call.
      Overload 1 of 2, '(options: ComponentOptions<Vue, DefaultData<Vue>, DefaultMethods<Vue>, DefaultComputed, PropsDefinition<Record<string, any>>, Record<string, any>> & ThisType<Vue>): <VC extends VueClass<...>>(target: VC) => VC', gave the following error.
        Type '{ SimpleCheckbox: typeof SimpleCheckbox; }' is not assignable to type '{ [key: string]: VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponent
Promise<any, any, any, any> | AsyncComponentFactory<...>; }'.
          Property 'SimpleCheckbox' is incompatible with index signature.
            Type 'typeof SimpleCheckbox' is not assignable to type 'VueConstructor<Vue> | FunctionalComponentOptions<any, PropsDefinition<any>> | ComponentOptions<never, any, any, any, any, Record<string, any>> | AsyncComponentPromise<any, any, any, any> | Asyn
cComponentFactory<...>'.
              Type 'typeof SimpleCheckbox' is not assignable to type 'VueConstructor<Vue>'.

Search Terms:

TS2345:, "vue-property-decorator Argument of type is not assignable to parameter of type 'VueClass'."

[RyanCavanaugh]

@DanielRosenwasser heard you like customer development

[RyanCavanaugh]

@TokugawaTakesi did the answer in the Stack Overflow post address this? It sounds like it's a ts-loader issue

[TokugawaTakeshi]

@RyanCavanaugh, well, I suppose there's no point to keep this issue opened. There are some riddles left, but it could not be directly related with TypeScript, as you said. I did not tried yet, but maybe Lerna using allows to avoid the errors like that was considered in this issue. Thank you for the bounty in Stack Overflow and TypeScript development!

[RyanCavanaugh]

Thanks for the follow-up! Happy to be of some assistance.