Laravel 6 + Vue. js Не удалось смонтировать компонент: шаблон или функция визуализации не определены

Question

Может быть, кто-то может мне помочь? Я пытаюсь создать небольшое приложение чата из здесь , и у меня возникают проблемы с отображением Vue компонентов.

Консоль dev-инструментов дает мне:

Не удалось смонтировать компонент: шаблон или функция визуализации не определены.

Я использую Laravel 6 Оцените любую помощь по этому вопросу! спасибо:)

Я попытался удалить папку node_modules и перестроить, после добавления .default - безуспешно.

app. js

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

 const files = require.context('./', true, /\.vue$/i)
 files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('chat-messages', require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);

import Vue from 'vue'
const app = new Vue({
    el: '#app',

    data: {
        messages: []
    },

    created() {
        this.fetchMessages();
        Echo.private('chat')
        .listen('MessageSent', (e) => {
          this.messages.push({
            message: e.message.message,
            user: e.user
          });
        });

    },

    methods: {
        fetchMessages() {

            axios.get('/messages').then(response => {
                this.messages = response.data;
            });

        },

        addMessage(message) {
            this.messages.push(message);

            axios.post('/messages', message).then(response => {
              console.log(response.data);
            });
        }
    }
});

и мой два компонента: ChatForm. vue

<template>
    <div class="input-group">
        <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
                Send
            </button>
        </span>
    </div>
</template>

<script>
    export default {
        props: ['user'],

        data() {
            return {
                newMessage: ''
            }
        },

        methods: {
            sendMessage() {
                this.$emit('messagesent', {
                    user: this.user,
                    message: this.newMessage
                });

                this.newMessage = ''
            }
        }    
    }
</script>

ChatMessage. vue

<template>
    <ul class="chat">
        <li class="left clearfix" v-for="message in messages" v-bind:key="message">
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">
                        {{ message.user.name }}
                    </strong>
                </div>
                <p>
                    {{ message.message }}
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
  export default {
    props: ['messages']
  };
</script>

Answer 1

Это может помочь вам решить вашу проблему, если не просто сказать мне, чтобы найти новое решение. сначала удалите это в своем приложении. js

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Затем удалите также этот код, который вы уже дважды импортировали vue.

import Vue from 'vue'