External Type Declaration Causing Inability to Pass certain Route Parameter as Prop in Vue Router 4

[Jay Lee]

Reproduction

ok

Steps to reproduce the bug

Define a route in Vue Router 4 with the necessary parameters, including agencyId and deliveryPriceSetupType.
Use the props option in the route configuration to pass these parameters as props to the component.
Access the props in the component and observe that while agencyId is successfully received, deliveryPriceSetupType is not.

Expected behavior

I expect both agencyId and deliveryPriceSetupType to be passed as props to the component, allowing me to access them within the component's logic.

// Vue Router 4 route configuration
{
  path: '/delivery-price-setup/order-agency/:agencyId/:deliveryPriceSetupType/group-list',
  component: () => import('@/pages/deliveryPriceSetup/orderAgencyGroupList/ui/DeliveryPriceSetupOrderAgencyGroupList.vue'),
  props: ({ query, params }: RouteLocationNormalized): DeliveryPriceSetupGroupListRouteProps => ({
    agencyId: Array.isArray(params.agencyId) ? params.agencyId[0] : params.agencyId,
    deliveryPriceSetupType: params.deliveryPriceSetupType as string || '',
    query: {
      ...query,
      page: query.page ? Number(query.page) : 1,
    }
  })
}

Actual behavior

When defining props like this:

// somewhere.ts
export type DeliveryPriceSetupGroupListRouteProps = {
  agencyId: string;
  deliveryPriceSetupType: string;
  query: {
    page: number;
  }
};

// component setup()
import type { DeliveryPriceSetupGroupListRouteProps } from '@/somewhere'
const props = defineProps<DeliveryPriceSetupGroupListRouteProps>();

The deliveryPriceSetupType is not being received as props, despite being defined as such.

When defining props as follows:

// component setup()
const props = defineProps<{
  agencyId: string;
  deliveryPriceSetupType: string;
  query: {
    page: number;
  }
}>();

It has been observed that deliveryPriceSetupType is received as props.

When I explicitly specify the type in the setup function of the component like this:

// component setup()
type TestType = {
  agencyId: string;
  deliveryPriceSetupType: string;
  query: {
    page: number;
  }
}

const props = defineProps<TestType>();

I can successfully retrieve deliveryPriceSetupType. Could this provide a clue to the underlying cause?

Additional information

This issue seems to be specific to the deliveryPriceSetupType parameter, as first parameter(agencyId) is passed successfully.
I have also checked for any typos or syntax errors in my code, but have not found any.

Environment:

• Vue Router 4 (^4.2.5)
• Vue.js 3
• TypeScript

[Jay Lee]

There haven't been any changes in the code, but suddenly the deliveryPriceSetupType is displaying correctly. Closing the issue as I'm not sure what's going on 🙄