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

JS defineProps() does not mark props as required #4876

Open
phil294 opened this issue Sep 24, 2024 · 0 comments · May be fixed by #4878
Open

JS defineProps() does not mark props as required #4876

phil294 opened this issue Sep 24, 2024 · 0 comments · May be fixed by #4878
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first

Comments

@phil294
Copy link

phil294 commented Sep 24, 2024

Vue - Official extension or vue-tsc version

2.1.6

VSCode version

1.93.1

Vue version

3.5.8

TypeScript version

5.5.4

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (6) arm64 unknown
    Memory: 16.18 GB / 22.27 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
  Browsers:
    Brave Browser: 128.1.69.168

package.json dependencies

"dependencies": {
    "vue": "^3.4.29"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.0.5",
    "vite": "^5.3.1"
  }

Steps to reproduce

JS (not TS) defineProps with a required prop:

<script setup>
defineProps({
  msg: {
    type: String,
    required: true
  }
})
</script>

In another component, import this component and use it in the template.

What is expected?

The prop cannot be omitted.

What is actually happening?

The prop is falsely marked as optional.

This image is from the repro repo:

image

When you define the component globally via components.d.ts, the typing becomes more obvious:

image

There's no error for the missing required_prop on the left. When I add lang="ts" to the script tag on the right, the error appears.

Link to minimal reproduction

https://github.com/phil294/vue-bug-repo

Any additional comments?

When you define props as

<script>
export default {
  props:{
    msg: {
      type: String,
      required: true
    }
  },
  setup() {
  }
}
</script>

nothing works at all. This was already reported in #4074 and is allegedly because of #3690 (which to me it doesn't seem like it but idk) which is labelled as a "minor" bug. In my opinion this isn't minor as arguably the main point of Volar, IntelliSense in Vue templates, is pretty much unusable if you're not using TS :-S

@KazariEX KazariEX added bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first and removed pending triage labels Sep 25, 2024
@KazariEX KazariEX linked a pull request Sep 25, 2024 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working good reproduction ✨ This issue provides a good reproduction, we will be able to investigate it first
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants