I got below TypeScript error when tried to use side component (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 with TypeScript 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';
@Component({ template, components: { SimpleCheckbox } }) // here !
export default class SkipProjectInitializationStepPanel extends Vue {
@Prop({ type: String, required: true }) private readonly text!: string;
}
As follows from ui-kit-libary-in-development name, this 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.vueto same directory asSkipProjectInitializationStepPanel.tsand import it asimport SimpleCheckbox from './SimpleCheckbox.vue'; - Remove
SimpleCheckboxfrom@Component({ template, components: { SimpleCheckbox } })and leave only@Component({ template, components: {} })(off course,SimpleCheckboxwill no be rendered in this case, but it proves that problem is not inSkipProjectInitializationStepPanel). - Move
ui-kit-libary-in-developmenttonode_modulesof main project and removenode_modulesfromui-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.
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 likevuetify? Because there is.d.tsthere! - How I need to declare new Vue component in
.d.ts? Some tutorial or example?
Source files for bounty
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 potential 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.
npm run developmentBuild. – Takeshi Tokugawa YD