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

🐛 BUG: Using Vue component with optional properties in Astro file cause type error #849

Open
jerry84 opened this issue Apr 3, 2024 · 5 comments
Labels
needs triage Issue needs to be triaged

Comments

@jerry84
Copy link

jerry84 commented Apr 3, 2024

Describe the Bug

When I import a Vue component in an Astro file, it complains on optional properties when running astro check

This seems to happen from astrojs/[email protected]

Steps to Reproduce

  1. add a optional property to a Vue component
<script setup lang="ts">
const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
});
</script>
  1. import the component in .astro file without defining a value for the optional property
---
import Example from '../components/Example.vue';
---
<Example  client:visible />
  1. run astro check

Link to an reproducible example

@github-actions github-actions bot added the needs triage Issue needs to be triaged label Apr 3, 2024
@jerry84
Copy link
Author

jerry84 commented Apr 8, 2024

@Princesseuh Is this a known issue? Any idea on how to deal with this?

@Princesseuh
Copy link
Member

I don't know, seems like a bug. I haven't investigated yet

@skfoo
Copy link

skfoo commented Jun 1, 2024

This may be related to #782. In VS Code I'm getting the 'no default export' error when I use defineProps with a default array, which led me to find that ticket and then this one. If you modify this ticket's sample code's Counter.vue's defineProps to add an array,

const props = defineProps({
  value: {
    type: Number,
    default: 0,
  },
  tags: {
    type: Array,
    default(raw) {
      return []
    }
  }
});

Instead of getting the original error from this bug you get the 'no default export' error instead. Also if you use the unmodifed example in #782 and run 'npx astro check' you also get the 'no default export' error (after removing the unused import FormattedDate line in index.astro because that trips up astro check first).

@jerry84
Copy link
Author

jerry84 commented Jun 11, 2024

I manage to solve this issue by using type-based declaration instead of runtime. I guess it is the best practice when using Vue component in Astro. In addition the typing is also better by doing that in the Astro file :)

@minht11
Copy link

minht11 commented Jul 14, 2024

That is indeed current limitation, defineProps works only with type definitions, not a easy problem to solve, but I think this should be documented as one of the limitations. https://github.com/withastro/astro/blob/bc2e74de384776caa252fd47dbeda895c0488c11/packages/integrations/vue/src/editor.cts#L40-L43

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
needs triage Issue needs to be triaged
Projects
None yet
Development

No branches or pull requests

4 participants