Version

3.0.11

Reproduction link

https://codesandbox.io/s/flamboyant-shirley-fy5w6?file=/src/App.vue

Steps to reproduce

Using script setup and a TS generic to react to change events on a select element I get the error "Unterminated JSX contents".

This is the code for the SFC.

<template>
  <select @change="handleChange">
    <option v-for="option in options" :key="option">{{ option }}</option>
  </select>
</template>

<script setup lang="ts">
import { defineProps } from "vue";

defineProps<{
  options: string[];
}>();

const handleChange = (e: Event) => {
  console.log((<HTMLSelectElement>e.target).value);
};
</script>

What is expected?

It should compile

What is actually happening?

Internal server error: [@vue/compiler-sfc] Unterminated JSX contents

I think this is a minor bug in the compiler as there are multiple workarounds

const handleChange = (e: Event & { target: HTMLSelectElement }) => {
  console.log(e.target.value);
};

or

const handleChange = (e: Event) => {
  console.log((e.target as HTMLSelectElement).value);
};

The cast operator in TS is as and it replaces the version you were using a long time ago. Precisely to avoid ambiguity: https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript#new-tsx-file-extension-and-as-operator