type definitions can disappear if they are mentioned in a template

[magicseth]

Version

3.2.30

Reproduction link

stackblitz.com

Steps to reproduce

define a custom type in another file:

TestCase.ts:

export type TestCase = number;

Reference it in your component template as an Array or as TestCase[]:

App.vue:

<script setup lang="ts">
import { TestCase } from './TestCase';
let testArray = [];
</script>

<template>
  Hello World
  {{testArray as TestCase[]}}
</template>

What is expected?

It is expected that the type be in the generated js file for TestCase

What is actually happening?

the type is omitted ONLY IF you cast something as an array of TestCase in the template

---

This is a very bizarre bug where adding a bit of code in the template changes the javascript generated. It doesn't work with yarn dev, but works fine with yarn build.

[yyx990803]

Vue checks whether an import is used in the template to determine whether it should be treated as a type-only import - but this leads to false positives when they are used as types in template expressions.

The workaround is using explicit import type { ... } from './...'.

[magicseth]

Thanks Evan, that workaround works.

This caused me hours of head scratching in particular because my code still work with "yarn dev" and only broke when I tried "yarn build"

Is this something that tooling could take care of with automatically adding "type" to the import statement or a reference to this possibility in the error message?

For searchability here is the error I received when this happened:
SyntaxError: The requested module '/src/components/TestCase.ts' does not provide an export named 'TestCase'

client.ts:35 [hmr] Failed to reload /src/components/TestCase.vue. This could be due to syntax errors or importing non-existent modules. (see errors above)