Error: Cannot find module './MessageFeed.vue'

Question

Here's The Screenshot Of The Error:-

These Are The Files That I am Working On:-

Here's The Conversation.vue:-

<template>
<div class="conversation">
    <h1>{{contact ? contact.name : 'Select a Contact'}}</h1>
    <MessageFeed :contact="contact" :message="messages"/>
    <MessageComposer @send="sendMessage"/>




</div>
</template>

<script>
    import MessageFeed from './MessageFeed.vue';
    import MessageComposer from './MessageComposer.vue';

    export default {
        props: {
        contact: {
        type: Object,
        default: null
},
        messages: {
            type: Array,
            default: []
}
},
    methods: {
        sendMessage(text){
            console.log(text);
}

}

}

</script>

Here's The MessageFeed.vue:-

<template>
    <div class="feed">
    <ul v-if="contact">
         <li v-for="message in messages" :class="`message${message.to == contact.id ? ' sent' : 'recieved'}`" :key="message.id">
        <div class="text">
        {{message.text}}
        </div>
</li>
         </ul>  

    </div>

</template>

<script>
    export default {
        props: {
        contact: {
            type: Object, 
            required: true
},
        message: {
           type: Array,
           required: true
}
}

}



</script>

I don't know anything about javaScript or the vue i was just following a tutorial and i stump upon this error couldn't find any solution I didn't even knew what codes to put up here but i hope this must be enough

-ThankYou

Answer 1

Try to rewrite scripts at Conversation.vue like there

    <script>
        import MessageFeed from './MessageFeed.vue';
        import MessageComposer from './MessageComposer.vue';

        export default {
            components: {
    MessageFeed,MessageComposer
  },
            props: {
            contact: {
            type: Object,
            default: null
    },
            messages: {
                type: Array,
                default: []
    }
    },
        methods: {
            sendMessage(text){
                console.log(text);
    }

    }

    }

    </script>