Giters

unplugin / unplugin-vue2-script-setup

💡 Bring `<script setup>` to Vue 2.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

`Cannot find name defineProps` ts error

jacekkarczmarczyk opened this issue · comments

commented

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

screenshot

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)

commented
  • 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

commented

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:

image

and with JSX syntax:

image

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.

commented
  • 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">
commented

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.

commented

@jacekkarczmarczyk vue-tsc is volar @_@

commented

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

commented

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