Property X does not exist on type '{}'. ts(2339)

[anthonyshibitov]

Terms

• I have searched all open bug reports
• I agree to follow activist's Code of Conduct

Behavior

Props in templates are returning a "property x does not exist on type '{}'" Typescript error with Volar and Typescript Vue VS plug-ins installed.

Image below:

[pujxn]

Hey, I'd love to take this up. Could you please assign it to me @andrewtavis

[andrewtavis]

Sounds good, @pujxn. Let me know if you need any assistance :)

[TeddyGavi]

Hello @pujxn I am wondering how you are doing on this! Have already solved it? I have found a few things that could potentially help. If you have solved it I am curious to see what you did! Thank you for your work. 👍 😎

[pujxn]

Hi @TeddyGavi , so far I've just realised I'm in way over my head. But I have tried explicitly defining the type for the props to 'any' as suggested here - https://stackoverflow.com/questions/34274487/typescript-property-does-not-exist-on-type
but no luck. I'm just trying to go through issues on forums but none of them seem too relevant. Would love a nudge in some direction!

[andrewtavis]

Thanks for your efforts @pujxn, and thanks also for the support @TeddyGavi! 😊

[TeddyGavi]

Hello @pujxn I too am in over my head! That is how we learn 👍 . I have done some asking around in other dev communities and reading of the docs, I have found a couple things that might be of help. https://nuxt.com/docs/guide/concepts/typescript is the link to Nuxt setup. It defines a typescript option.

As far as I can tell there is nothing telling Nuxt/Vue to use typescript, so attempting to import or declare defineProps becomes undefined...maybe I am out to lunch? I stumbled on this because in LabeledBtn.vue -> defineProps gives an error. However the usage of defineProps looks fine as far as I can tell in the Vue docs. https://vuejs.org/guide/typescript/composition-api.html

So in nuxt.config.ts it would be:

  typescript: {
    strict: true,
    typeCheck: true,
  },

and in tsconfig.json:

  "extends": "./.nuxt/tsconfig.json",
  "compilerOptions": {
    "strict": true,
       // ...other options
    "types": [
      // ... lib types in project as needed...
    ]
  }
}

And there is always this to look at as an option https://github.com/viandwi24/nuxt3-awesome-starter/tree/main

I wonder if @andrewtavis since you mentioned you looked into this previously, have you tried something like this? If yes then we need to try something else.

This might be wrong, but these are things I have looked into! I haven't had time to try this yet in the code. Good luck!

[andrewtavis]

I haven't tried either of these options, @TeddyGavi :) Definitely worth a try 😊 Do both of you want to try these changes to see if they'd work, and if so we can get @pujxn to send along the change? (hope that's ok, @TeddyGavi!)

[TeddyGavi]

No problem @andrewtavis sounds like a great plan!

[pujxn]

Thanks so much, @TeddyGavi ! Let me try this out, seems promising.
@andrewtavis thank you too!

[andrewtavis]

Looking forward to hearing back from you, @pujxn! :)

[pujxn]

Hi @TeddyGavi , so I added the typescript option to nuxt config, and also looked updated tsconfig to match exactly to what https://github.com/fi3ework/vite-plugin-checker/issues/193#issuecomment-1440452881 has. However, we're still facing the same issue. I forked that project, and see that it too shows the same ts2339 errors.

I was trying to run the docker image for activist, and it gave me an error stating: ERROR Cannot start nuxt: Cannot find module 'vue-tsc/out/proxy'

I then installed it along with typescript using : npm i --save-dev vue-tsc typescript

I found another issue where the suggested fix was to upgrade the version to latest: fi3ework/vite-plugin-checker#193 (comment)

But since I'm already on the latest one, I don't see what could be going wrong.

This is my first time using Docker, so apologies if I'm missing something obvious

[TeddyGavi]

Hey @pujxn Thats too bad that didn't work out! I got some feedback from another community and could be something else to look into. I'll copy the thread there:

(it may be confusing as we both have the same first name! I am Matt, he is the Matthew 😆

Matt Davis
2 days ago
Hello
@Matthew
I have been away and didn't see this. I haven't actually tried anything except to use defineProps but that gives the error Cannot find name 'defineProps'.ts(2304). I did notice that in the nuxt.config.ts, there is no typescript option defined.

And the reply:

Matthew
1 day ago
That generally means:
TypeScript had no tsconfig.json
Vue3 is not properly installed
What should happen with a tsconfig.json in the same root as your node_modules is that Vue installs “ambient” globals like defineProps. I don’t know the specifics about Nuxt, haven't worked with it in a while, but the project sounds misconfigured.
Sometimes what you can do is clone a “starter” Nuxt + TS app in another folder to figure out what pieces / configs are missing. Also note that defineProps ONLY works in a <script setup lang=“ts”> tag and nowhere else. i.e. in <script lang=“ts”> it will fail. Also at least Vue 3.2 is required for that feature, but 3.3 is ideal

So now I am thinking that we need to look carefully at the package.json to make sure we have all the correct deps for TS.

Any thoughts @andrewtavis ?

[andrewtavis]

Great that you're in these communities, @TeddyGavi 😊😊 So looking at nuxt3-awesome-starter a bit more in detail, specifically for TS in their package.json they have vue-tsc as well as "lint-staged" references to TS. The also have typescript, which seems to be an obvious thing to add 😅

Maybe trying some of these installations along with the methods from this comment would work?

Thanks to you both for all your efforts!

[TeddyGavi]

Hello @pujxn and @andrewtavis @anthonyshibitov

I believe I have the configuration sorted out, at a basic level. I created a thread in matrix recently and have added some of my current findings there. In summary:

1. From activist/frontend I ran

  yarn add --dev vue-tsc typescript

2. A new types file was generated inside .nuxt immediately
3. I added the related typescript code in nuxt.config.ts and tsconfig.json according to the nuxt3-awesome-starter

And 😄 the TS errors (almost all of the error ts(2339) went away. Exceptions were thrown where certain properties weren't defined in defineProps of the script for a given component.

I was trying to run the docker image for activist, and it gave me an error stating: ERROR Cannot start nuxt: Cannot find module 'vue-tsc/out/proxy'

I had the exact same issue. After a full docker clean with docker system prune and docker desktop restart everything is working, although now Nuxt is giving some TS-related errors. See the matrix thread for more.

I wonder how we should proceed now. As some components such as SearchBar.vue do not have any types defined with defineProps. Other components such as LabeledBtn.vue have explicit types but the list is not complete. Still others like MediaImageCarousel.vue use defineComponent instead of defineProps. Any thoughts on this? @andrewtavis

Also, I would like to see if @pujxn and others get the same outcome.

[andrewtavis]

Notes from a call that I had with @TeddyGavi (😊):

• I'd suggest that we send along the config changes as a PR and from there
• Any issues that come up with building on the new configuration should be added to the documentation (contributing guide and readme)
• A separate issue should be made to standardize the TypeScript property definitions within <Script> blocks within .vue files
  • A part of this issue would further be to update the STYLEGUIDE.md with these conventions in the Vue and Nuxt section
• Further issues can then be made to address new TypeScript issues
• An issue would further be to check that all the types have been applied for the packages that we're using
  • At times the types will be loaded into the .nuxt/types directory directly, but we may need to add these manually to the tsconfig.json

[andrewtavis]

@TeddyGavi, do you want to send along a minor commit that annotates yarn nuxi typecheck in the CONTRIBUTING and STYLEGUIDE? I can make an issue for this, you can make an issue for it, or you're also free to send along a PR 😊

@anthonyshibitov, it'd also be great to get your feedback on this to let us know if there're any issues on your end still :)

I'll close this for now so long as nothing else comes up. Thanks again all for your dedication to the infrastructure and development experience! 🙏