Vue version

3.3.2

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-vecst9?file=src%2FComp.ts&terminal=dev

Steps to reproduce

When creating a functional component, TS2339 is thrown, saying that "props" does not exist on the type.

What is expected?

That I can assign "props" to the component without TS2339 being thrown.

What is actually happening?

TS2339 is thrown, which results in type checking errors, but everything does seem to run fine.

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 406.98 MB / 32.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.12.1 - ~/Development/Library/node.js/18.12.1/node-v18.12.1-darwin-arm64/bin/node
    Yarn: 3.5.0 - ~/Development/Library/node.js/18.12.1/node-v18.12.1-darwin-arm64/bin/yarn
    npm: 8.19.2 - ~/Development/Library/node.js/18.12.1/node-v18.12.1-darwin-arm64/bin/npm
  Browsers:
    Chrome: 113.0.5672.63
    Firefox: 112.0.2
    Safari: 16.4

Any additional comments?

No response

It seems that you should use the second parameter of defineComponent to pass it instead of assigning it directly.

import { defineComponent, h } from 'vue';

const props = {
  text: { type: String, default: 'ok' },
};

const component = defineComponent(
  (props, { attrs }) => {
    return () => h('div', attrs, [props.text]);
  },
  { props }
);

It seems that you should use the second parameter of defineComponent to pass it instead of assigning it directly.

import { defineComponent, h } from 'vue';

const props = {
  text: { type: String, default: 'ok' },
};

const component = defineComponent(
  (props, { attrs }) => {
    return () => h('div', attrs, [props.text]);
  },
  { props }
);

Thanks! That seems to indeed solve the issue. In 3.2 this is not valid syntax, but as of 3.3 it seems like the correct way to define functional components. Maybe the documentation should be updated accordingly (https://vuejs.org/guide/extras/render-function.html#functional-components).

Document

Document

Super, thanks!

It's also mentioned here https://github.com/vuejs/core/blob/main/CHANGELOG.md#breaking-changes

I had meanly read through the blogpost and saw nothing breaking immediately, but there is a mention to a PR somewhere. A small example may had been usefull. Anyway, since it's a syntax error, I'm closing the ticket.

update vue to 3.3.4,i got some error like this.

Property "$t" does not exist on type "{ $: ComponentInternalInstance; $data: {}; $props: { style?: unknown; ref?: VNodeRef | undefined; key?: string | number | symbol | undefined; ref_for?: boolean | undefined; ... 7 more ...; class?: unknown; }; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) ...".ts(2339)

this is my tsconfig file

{
  "compilerOptions": {
    "composite": false,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "allowJs": false,
    "importHelpers": true,
    "moduleResolution": "node",
    "skipLibCheck": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "sourceMap": true,
    "baseUrl": ".",
    "forceConsistentCasingInFileNames": true,
    "types": [
      "vite/client",
      "lodash-es",
      "unplugin-icons/types/vue",
      "naive-ui/volar"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "src/**/*.json",
    "*.d.ts"
  ],
  "exclude": [
    "src/**/__tests__/*",
    "node_modules",
    "bin/dev/*"
  ]
}

when i use vue 3.2.x, do not has this error