Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Getting "No overloaded matches this call" When Calling a Component With Props #97

Open
scottxhe opened this issue Feb 14, 2022 · 0 comments

Comments

@scottxhe
Copy link

I have a child component

export default tsx.component({
    name: 'Person',
    props: {
        boo: {
            type: String,
            required: true
        },
        foo: {
            type: String,
        }
     },

when I call it with a prop in a parent

import Person ...
export default tsx.component({
    render(h): VNode {
        return (
            <div>
                <Person boo="boo"/>
            </div>
        )
    }
})

I'm getting these errors


No overload matches this call.
  Overload 1 of 3, '(options?: ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never>'.
      Property 'boo' does not exist on type 'ThisTypedComponentOptionsWithArrayProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, never>'.
  Overload 2 of 3, '(options?: ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object>'.
      Property 'boo' does not exist on type 'ThisTypedComponentOptionsWithRecordProps<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, object, object, object, object>'.
  Overload 3 of 3, '(options?: ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps> | undefined): CombinedVueInstance<...>', gave the following error.
    Type '{ boo: string; }' is not assignable to type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
      Property 'boo' does not exist on type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: s 
. 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
      Property 'boo' does not exist on type 'ComponentOptions<_TsxComponentInstanceV3<Vue & { boo: string; foo: string; }, {}, { boo: string; } & { foo?: string | undefined; }, {}, {}, {}>, DefaultData<_TsxComponentInstanceV3<Vue & { ...; }, ... 4 more ..., {}>>, DefaultMethods<...>, DefaultComputed, PropsDefinition<...>, DefaultProps>'.
     7 |         return (
     8 |             <div>
  >  9 |                 <Person boo="boo"/>
       |                         ^
    10 |             </div>
    11 |         )
    12 |     }

It seems like props in the child were not getting recognized at all, there is no type of checking no required enforcement, nothing, I may have missed something basic here but please advise.

babel

module.exports = {
  "presets": [
	"@vue/app",
	["@vue/babel-preset-jsx"]
  ],
  "plugins": [
    "@babel/plugin

tsconfig

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
      "jsxFactory": "VueTsxSupport",
    "importHelpers": true,
    "moduleResolution": "node",
      "noImplicitAny": false,

package.json

    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "@vue/composition-api": "^1.4.1",
    "vue": "^2.6.11",
    "vue-tsx-support": "^3.2.0",
    "@typescript-eslint/eslint-plugin": "^5.8.1",
    "@typescript-eslint/parser": "^5.8.1",
    "@vue/cli-plugin-babel": "^3.7.0",
    "@vue/cli-plugin-eslint": "^3.7.0",
    "@vue/cli-plugin-typescript": "^4.5.15",
    "@vue/cli-service": "^3.7.0",
    "@vue/eslint-config-prettier": "^4.0.1",
    "@vue/eslint-config-typescript": "^10.0.0",
    "babel-plugin-component": "^1.1.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "babel-preset-vca-jsx": "^0.3.6",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "typescript": "^4.5.4",
    "vue-template-compiler": "^2.6.11"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant