question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Volar/vue-tsc no longer showing type errors in templates after v0.35.2

See original GitHub issue

I’m experiencing an issue related to type checking in templates: VSCode/Volar correctly shows a type violation when trying to pass a variable of type SomethingNonFalsy | undefined to a component’s prop that basically only accepts SomethingNonFalsy | null:

image

Prop definition: image

However, vue-tsc --noEmit exits with code 0 and without showing any errors.

Now here’s the thing: The above happened with VSCodium 1.70.0, vue-tsc 0.40.1 and Volar 0.30.1.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Intermezzo BEGIN ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

The latter was the most recent version of Volar (more specifically: johnsoncodehk.volar) that I could find in VSCodium:

grafik grafik

My understanding is that the package johnsoncodehk.volar has been renamed to vue.volar and only the latter comes with more recent versions. But vue.volar doesn’t show up in my search results in VSCodium?

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Intermezzo END ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Anyway, if I download Vue.volar-0.40.1@linux-x64.vsix manually from the marketplace and install it in VSCodium by hand, the above type error disappears, i.e. the behavior of Volar then matches the (IMO wrong) behavior of vue-tsc 0.40.1. Could it therefore be that a bug has been introduced here in the repo between Volar/vue-tsc 0.30.1 and Volar/vue-tsc 0.40.1?

To double-check I rolled back to vue-tsc 0.30.1. Now, vue-tsc --noEmit shows the same (correct) type error and, in fact, many other type errors in templates – not necessarily related to prop types – such as:

[…] error TS2345: Argument of type 'Maybe<string> | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

19         :disabled="disabledItems.includes(selectedItemId)"
                                             ~~~~~~~~~~~~~~

[…] error TS2533: Object is possibly 'null' or 'undefined'.

32             >{{ item.description }}</span
                   ~~~~

(Background: Both selectedItemId and item can indeed be null or undefined, so these type errors are correct as well.)

PS: I also happened to have vue-tsc v0.35.2 lying around – that version, too, fails to recognize the type errors.

Issue Analytics

  • State:closed
  • Created a year ago
  • Reactions:3
  • Comments:6 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
codethiefcommented, Aug 16, 2022

@Alverrt @last-partizan @fi3ework Again, it looks like you might be facing a separate issue. The present ticket is about a bug that’s been occurring starting from at least v0.35.2. You seem to be talking about a bug that was introduced in v0.40.x? If so, would you mind opening a new ticket?

0reactions
johnsoncodehkcommented, Sep 8, 2022

Hi @codethief, first thanks for the report, but I can’t reproduce it, could you try can it reproduce in https://github.com/johnsoncodehk/volar-starter?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Volar (correctly) detects type errors in templates but Typescript ...
There are some cases where I send the wrong value to a component (type is wrong) and Volar detects it immediately and shows...
Read more >
Compiler Error C7510 - Microsoft Learn
The compiler requires the template or typename keyword to precede a template or type name when it comes after a dependent nested-name-specifier ...
Read more >
Fix template output errors - Search Ads 360 Help
The inventory plan's error report appears. The report contains one row for each type of error. The Items affected column shows the number...
Read more >
Angular 9's Best Hidden Feature: Strict Template Checking
Find and report more errors than ever with Angular 9's Ivy compiler, ... The following component displays a list of heroes in the...
Read more >
Linting errors for ref()'s within Vue 3 templates when using ...
... and this was conflicting in a number of ways. ... but not only the problem was gone after I moved the legacy...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found