Use of Vue component leads to typescript error ts2749 in template

Question

I want to build an example on the Vue Playground. I created the following 4 files:

<!-- App.vue -->
<script setup lang="ts">
import LegList from './LegList.vue';
</script>

<template>
  <main>
    <div>
      <LegList />
    </div>
  </main>
</template>

// store.ts
import { ref } from 'vue'
import { defineStore } from 'pinia'

export class Voyage {
  static nextId = 1
  public id: number
  public name: string
  public legs = [] as Leg[]

  public constructor(id: number, name: string) {
    this.id = id
    this.name = name
  }

  public newLeg = () => {
    const leg = new Leg(Leg.nextId++, this.id, 'newLeg')
    this.legs.push(leg)
  }

  public removeLeg = () => {
    this.legs.pop()
  }
}

export class Leg {
  static nextId = 1
  public id: number
  public voyage_id: number
  public name:string
 
  public constructor(id: number, voyage_id: number, name: string) {
    this.id = id
    this.voyage_id = voyage_id
    this.name = name
  }
}

export const useVoyageStore = defineStore('voyages', () => {
  const voyages = ref([] as Voyage[])
  const currentVoyage = new Voyage(Voyage.nextId++, 'newVoyage')
  voyages.value.push(currentVoyage)


  const addVoyage = (voyage: Voyage) => {
    voyages.value.push(voyage)
  }

  const removeVoyage = (id: number) => {
    const index = voyages.value.findIndex((x) => x.id == id)
    if (index > -1) {
      voyages.value.splice(index, 1)
    }
  }

  return {
    voyages,
    currentVoyage,
    addVoyage,
    removeVoyage,
  }
})

<!-- LegList.vue -->
<script setup lang="ts">
import VoyageLeg from './VoyageLeg.vue'
import { useVoyageStore } from './store'

const voyageStore = useVoyageStore()
</script>

<template>
  <h3>Voyage {{ voyageStore.currentVoyage.id }} with {{ voyageStore.currentVoyage.legs.length }} legs</h3>
  <button @click="voyageStore.currentVoyage.newLeg">Add Leg</button>
  <div :key="voyageStore.currentVoyage.id>
    <VoyageLeg v-for="item in voyageStore.currentVoyage.legs" :key="item.id" :leg="item"> </VoyageLeg>
  </div>
</template>

<!-- VoyageLeg.vue -->
<script setup lang="ts">
import { Leg } from './store'

defineProps<{
  leg: Leg
}>()

</script>

<template>
      <div style="border:1px">
          <input id="voyageleg-name" type="text" autocomplete="off" :value="leg.name">
      </div>
</template>

In the template of the LegList component the VoyageLeg component is not recognized with the error 'VoyageLeg' refers to a value, but is being used as a type here. Did you mean 'typeof VoyageLeg'?ts(2749)

In the template of App.vue the LegList component doesn't spark an error.

What am I doing wrong?

The code can be found here: Vue Playground

Answer 1

I think that you mostly had an issue with the tag on the line just before aka

<div :key="voyageStore.currentVoyage.id>

There is a missing closing double-quote here ☝️

Fixing that one fixes everything and removes the error. The color highlighting was helpful to narrow down the issue here.

Before