Expected T, got Object in Vue-Prop of custom Object-Type

Question

Description

Hello there,

I would like to share my Vue-components using bit.dev.

I got a Vue-component like this:

<template>
    ...
</template>

<script>

import CustomItem from "../../../../objects/CustomItem";

export default {
    name: "Test",
    props: {
        item: {
            type: CustomItem,
        },
    },
};
</script>

As you can see, this component requires the prop to be a specific object.

This is the CustomObject

export default class CustomItem {
    constructor ({id, name}) {
        this.id = id;
        this.name = name;
    }

   // provide cool functions here
}

This works fine in my project, but not if I include this this way:

<template>
    <div v-if="!$wait.is('item.loading')">
        <MyComponent :item="item"/>
    </div>
</template>

<script>
import MyComponent from '@bit/myproject.my-component'
import CustomItem from '@bit/myproject.custom-item';

export default {
    name: 'Home',
    components: {MyComponent},
    data () {
        return {
            item: {}
        };
    },
    beforeRouteEnter (to, _from, next) {
        const promises = [
            axios.get (`/api/item/1`)
        ];

        next (vm => {
            vm.$wait.start ('item.loading');
            axios.all (promises)
            .then (([itemRes]) => {
                vm.item = new CustomItem(itemRes.data.data);
            }).finally(()=>{
                vm.$wait.end ('item.loading');
            });
        });
    },
};
</script>

In this case I get this error:

[Vue warn]: Invalid prop: type check failed for prop "item". Expected T, got Object 

found in

---> <MyComponent> at resources/js/components/Items/MyComponent.vue

What did I miss here?

Edit

As I can see, the component @bit/myproject.my-component which has been provided by bit.dev, provides a packed and minified version of my component. In there, the prop looks like this:

props:{item:{type:function t(e){var n=e.id,r=e.name})...

So I guess this is why this happens.

Answer 1

Basically it seems that in your project actually there are 2 classes CustomItem:

• the one you imported relatively:

import CustomItem from "../../../../objects/CustomItem";

• and the one you imported as an external package:

import CustomItem from '@bit/myproject.custom-item';

So I would try first to check if it works when you unify your imports to one form:

import CustomItem from '@bit/myproject.custom-item';

But is JS world things are not simple sometimes and even this may not help you - sometimes even referring to CustomItem in this way does not guarantee that there won't be more than one CustomItem in your production codebase. The solution I would suggest is to enforce 'duck-typing' in a custom props validator, if it's really important to check the type of the prop. You still cannot use JS instanceof as it won't work, even checking item.prototype.name === 'CustomItem' is not a good idea, as class names are changed during code minimalization, so duck-typing seems to be the only reasonable solution for you.