Cannot find name defineProps ts error

[jacekkarczmarczyk]

In a vue2 + vite + unplugin-vue2-script-setup project i have a ts error (not eslint) on build that Cannot find name defineProps/defineEmits

Here's project's tsconfig https://github.com/jacekkarczmarczyk/rachunek/blob/master/tsconfig.json and example usage of defineProps https://github.com/jacekkarczmarczyk/rachunek/blob/master/src/components/BillForm/BillForm.vue#L163 (that's not a minimal repro, but I guess just the settings files are imporant, if you want a minimal repro though let me know)

To reproduce the issue run yarn build

Error can be supressed with // @ts-ignore but that doesn't sound like a valid solution. Another option is to add .d.ts files with defineProps declaration but I think that should be rather provided by the lib (or maybe it is but can't find anything)

[xiaoxiangmoe]

• remove src/shims-tsx.d.ts.
• remove src/shims-vue.d.ts
• create empty file src/shims-vue.d.ts and add /// <reference types="unplugin-vue2-script-setup/shims.js" />

Example Project: https://github.com/antfu/unplugin-vue2-script-setup/blob/main/examples/vue-cli/src/shims-vue.d.ts

[jacekkarczmarczyk]

Thanks, but that doesn't seem to work, not only it didn't solve the problem with unrecognized defineProps but also added problem with recognizing .vue files:

and with JSX syntax:

Adding /// <reference types="unplugin-vue2-script-setup/shims.js" /> to existing vue shim didn't help as well.

Also this example project is a vue-cli project and mine is vite, maybe that matters.

[xiaoxiangmoe]

• yarn add --dev @vue/runtime-dom
• do one of below
  • add "allowJs": true, in your tsconfig to allow js <script>
  • or change js <script> to ts <script lang="ts">

[jacekkarczmarczyk]

yarn add --dev @vue/runtime-dom

Thank you, that was it! I have lang="ts" in all components so no need for other steps, also seems that /// <reference types="unplugin-vue2-script-setup/shims.js" /> is not necessary as well

I've pushed changes to the repo, now it compiles fine, however I'll leave this issue open as I consider it to be the documentation issue. Readme says:

We recommend using VS Code with Volar to get the best experience (You might want to disable Vetur if you have it).
When using Volar, you need to install @vue/runtime-dom as devDependencies to make it work on Vue 2.

I'm not using Volar or VS Code so I've skipped this step, but it seems that you need to add the dependency anyway.

[xiaoxiangmoe]

@jacekkarczmarczyk vue-tsc is volar @_@

[jacekkarczmarczyk]

hm what is https://github.com/johnsoncodehk/volar then? nvm, I see now
still i think that putting information about dependency in the IDE section is misleading, writing about Vetur, Volar and VS Code in one sentence may make people think that it's about using Volar extension in VS Code

[andygeek]

It happens to me because I didn't give it npm install, but then you have to disabled Vetur if you have it installed

[xianghongai]

only support Vue 2.6 or earlier

i. Install VS Code Extension

• Vue.volar
• NicholasHsiang.vscode-vue2-snippets

ii. Install Dependencies

yarn add --dev @vue/runtime-dom unplugin-vue2-script-setup && yarn add @vue/composition-api

iii. Config package.json

{
  "eslintConfig": {
    "globals": {
      "defineProps": "readonly",
      "defineEmits": "readonly",
      "defineExpose": "readonly"
    }
  }
}

iv. Config jsconfig.json^

{
  "compilerOptions": {
    "checkJs": true,
    "allowJs": true,
    "baseUrl": ".",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  },
  "exclude": [
    "dist",
    "node_modules",
  ],
  "include": [
    "src/**/*"
  ],
  "typeAcquisition": {
    "include": ["@vue/runtime-dom"]
  },
  "vueCompilerOptions": {
    "experimentalCompatMode": 2
  }
}

v. Config Vite

• unplugin-vue2-script-setup / Vite
• playground/vite.config.ts