'Cannot find name' errors for no reason

Volar works perfectly for all files, except for one. For some reason it thinks that I’m using “JSX” in templates. Here is code:

<template> 
  <div id="roundchat" class="roundchat chat">
    <div class="chatroom">
      Chat room
      <input
        id="checkbox"
        title="Toggle the chat"
        name="checkbox"
        type="checkbox"
        @click="toggle"
      />
    </div>
    <ol id="lobbychat-messages">
      <div id="messages" v-if="hiddenChat">
        <li v-for="i in messages" :key="i" class="message">
          <div class="time">{{ i.time }}</div>
          <span class="user">
            <a href="/">{{ i.user }}</a>
          </span>
          <span> {{ i.message }} </span>
        </li>
      </div>
    </ol>

    <input
      v-model="message"
      v-on:keyup.enter="onEnter"
      id="chat-entry"
      maxlength="140"
      type="text"
      name="entry"
      autocomplete="off"
      :placeholder="setPlaceholder()"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, Ref } from "vue";


const props = defineProps({ messages: [], wsType: String });
const messages: Ref<ChatMessage[]> = ref(props.messages!);
const message = ref("");
const hiddenChat = ref(true);


function onEnter(): void {
  if (message.value.length > 0 && message.value.length < 80) {
    //ws.send...
    message.value = "";
  }
}

function setPlaceholder(): string {
  let reg = false;
  if (reg == false) {
    return "Sign in to chat";
  } else {
    return "Please be nice in the chat!";
  }
}

function toggle(): void {
  hiddenChat.value = !hiddenChat.value;
}

interface ChatMessage {
  time: String;
  user: String;
  message: String;
}
</script>

<style scoped>
.user {
  padding-right: 6px;
  font-weight: bold;
}
</style>

Project made with: Vue + Vite + Ts And when I want to use this component in my view, TypeScript complains with:

JSX element class does not support attributes because it does not have a '$props' property

Component inside view.

<template>
  <ChatRoom :messages="[]" wsType="home_chat_message" />
</template>

<script setup lang="ts">
import ChatRoom from '@/components/ChatRoom.vue';
</script>

[xiaoxiangmoe]

You should use const props = defineProps({ messages: Array as PropType<Array<ChatMessage>>, wsType: String });

---

But I prefer use

const props = defineProps<{
  messages: Array<ChatMessage>;
  wsType: string;
}>();

[uros-5]

You should use const props = defineProps({ messages: Array as PropType<Array<ChatMessage>>, wsType: String });

But I prefer use

const props = defineProps<{
  messages: Array<ChatMessage>;
  wsType: string;
}>();

This fixed the issue, thanks!