Each globally registered component suddenly displays a red TypeScript squiggle in the markup! Surprisingly, the app continues to function without any visible errors!
This issue arises with all components, whether they are custom-made or third-party libraries.
No error is thrown when I directly import the components into the Vue file.
A mundane example of registering a component
//main.ts
import MyComponent from "./components/MyComponent.vue";
_app.component(MyComponent, "my-component");
An unexciting usage scenario
//SomeView.vue
< script setup lang="ts>
import OtherComp from "./components"
</script>
<template>
<div>
<my-component>
<!-- Red Squiggles! -->
</my-component>
<OtherComp>
<!-- No error on local import-->
</OtherComp>
</div>
</template>
What could be causing this unexpected behavior? Did I accidentally update TypeScript, Volar, or a linter? Could it just be a false error? It's certainly not easy on the eyes.