My Vue-cli install with TypeScript is set up to render JSX using a boilerplate. However, I am facing an issue when trying to pass a property to the HelloWorld component. Here's what my code looks like:
export default Vue.extend({
name: 'App',
functional: true,
render() {
return (
<div id="app">
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
</div>
);
},
});
Even though I managed to successfully pass the msg prop by adding the context in the functional component file like this:
export default Vue.extend({
name: 'HelloWorld',
functional: true,
props: {
msg: String,
},
render(h, context) {
return (
<div class="hello">
<h1>{ context.props.msg }</h1>
</div>
);
},
});
However, despite the functionality working as expected and the string rendering in the HTML, I'm still receiving a complex error message in my terminal:
ERROR in /home/scott/convrrt-component/view-play/src/App.vue(25,21):
25:21 No overload matches this call.
Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never> | undefined): CombinedVueInstance<{ ...; } & Vue, object, object, object, Record<...>>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never>'.
Property 'msg' does not exist on type 'ThisTypedComponentOptionsWithArrayProps<{ msg: string; } & Vue, object, object, object, never>'.
Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object> | undefined): CombinedVueInstance<...>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object>'.
Property 'msg' does not exist on type 'ThisTypedComponentOptionsWithRecordProps<{ msg: string; } & Vue, object, object, object, object>'.
Overload 3 of 3, '(options?: ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>> | undefined): CombinedVueInstance<...>', gave the following error.
Type '{ msg: string; }' is not assignable to type 'ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
Property 'msg' does not exist on type 'ComponentOptions<{ msg: string; } & Vue, DefaultData<{ msg: string; } & Vue>, DefaultMethods<{ msg: string; } & Vue>, DefaultComputed, PropsDefinition<...>, Record<...>>'.
23 | // Needed to add in .eslintrc in rules a property of: "global-require": 0
24 | <img alt="Vue logo" src={require('@/assets/logo.png')} />
> 25 | <HelloWorld msg="Welcome to Your Vue.js + TypeScript App" />
| ^
26 | </div>
27 | );
28 | },
Version: typescript 4.1.6
This error seems contradictory given that the functionality works, and the prop 'msg' is properly defined in the HelloWorld component.
Question: What could be causing this error message in the terminal, and how can it be resolved?