[plugin:unplugin-vue2-script-setup] Unexpected token, expected "," (1:16)

[Neophen]

Hey i have the weirdest issue:

here's the component:

<script setup name="OnThisVoyage">
import { useOrganisationIdProp } from '../../composables/useRouteHelpers.js';
import { provideBaseCardState } from '../../features/useBaseCardState.js';
import Service from '../../classes/Service.js';

import CargoRow from './CargoRow.vue';

const props = defineProps({
  ...useOrganisationIdProp(),
  shipmentId: {
    type: [Number, String],
    required: true,
  },
});

const {
  setStateLoading,
  setStateIdle,
  setStateError,
  setStateNoData,
} = provideBaseCardState();

const cargoes = ref([]);

const fetchCargoes = () => {
  Service.organisation(props.organisationId)
    .shipment(props.shipmentId)
    .voyage()
    .index()
    .onStart(setStateLoading)
    .onSuccess(({ data }) => {
      cargoes.value = data.filter(
        (cargo) => cargo.shipping_id !== props.shipmentId
      );
      setStateIdle();
    })
    .onNoData(setStateNoData)
    .onError(setStateError);
};

onMounted(() => {
  fetchCargoes();
});
</script>

<template>
  <BaseCardWithState
    title="On this voyage"
    no-data-title="No other cargoes on this voyage."
    @retry="fetchCargoes"
  >
    <CargoRow
      v-for="{ cargo_key, shipping_id, commodity } in cargoes"
      :key="cargo_key"
      :shipment-id="shipping_id"
      :commodity="commodity"
      :organisation-id="organisationId"
    />
  </BaseCardWithState>
</template>

When trying to render this component vite throws an error:

[plugin:unplugin-vue2-script-setup] Unexpected token, expected "," (1:16)
/Users/mykolas/Documents/Projects/myg2-frontend/src/components/OrganisationShipments/OnThisVoyage.vue:1:16
1  |  <script setup name="OnThisVoyage">
   |                  ^
2  |  import { useOrganisationIdProp } from '../../composables/useRouteHelpers.js';
3  |  import { provideBaseCardState } from '../../features/useBaseCardState.js';

[Neophen]

Does anything come to mind? I'm trying to disable things one by one and see what causes the issue

[Neophen]

ok so the issue was v-for="{ cargo_key, shipping_id, commodity } in cargoes"
changed it to ` v-for="item in cargoes"
and it works now....

[Neophen]

Noticed something weird, something is broken the way this plugin works with v-for
you can't have the word link anywher in the variable,
e.g. link prefixLink linkAppend
Threse will all break with the same issue as mentioned above.
Also if (not fully confirmed) if the name of the item starts with the same text v-for="booking in bookings" although it migh just be that i've missed some link in another variable.

<div v-for="(link, index) in links" :key="index" class="py-4 space-y-2">

[Neophen]

I could most likely try and do a pr if you point me in the right direction.

[antfu]

Thanks, I will have a look on this