laravel + vue.jsで作成したアプリをherokuにデプロイしようと考えています。
現状： git push heroku masterコマンドで下記のエラーが出ます。開発環境ではエラーは出ていません。
error
1error in ./resources/js/components/Message.vue?vue&type=style&index=0&id=61e01e04&scoped=true&lang=css&
2
3Module build failed (from ./node_modules/postcss-loader/src/index.js):
4TypeError: Cannot read property 'toLowerCase' of undefined
エラー文からの理解
undefinedからtoLowerCaseを読み取ることは出来ません。
調べたサイト
上記からmessageとmessagelistの子コンポーネントの読み込み部分とかが怪しいのか？と思い確認してみるも特に見つける事ができませんでした。
messagelistcomponent
1<template>
2<div class="inbox_msg">
3 ..省略
4 <message @last_message="last_message_info" :user="user" :room_id="room_id" :login_user_id="login_user_id"></message>
5</div>
6</template>
7
8<script>
9const axios = require('axios');
10import {mapState} from 'vuex'
11import message from './Message.vue'
12export default {
13 props: [
14 'login_user_id', 'redirect_room_id',
15 ],
16 components: {
17 message
18 },
19 data() {
20 return {
21 user_rooms: [],
22 message_url: '',
23 user: '',
24 room_id: '',
25 search: '',
26 here_redirect_room_id: ''
27 }
28 },
29 computed: {
30 ...mapState('follow',['url'])
31 },
32 created() {
33 this.here_redirect_room_id = this.redirect_room_id
34 this.get_room_info()
35 },
36 methods: {
37 。。。省略
38 }
39}
40</script>
41
messagecomponent
1<template>
2 <div class="mesgs" v-if="user && room_id">
3 <h6 class="text-center mb-2" >{{user.name}}</h6>
4 <div class="msg_history" ref="scroll_here">
5 <div v-for="message in room_messages" :key="message.id">
6 <div v-if="message.user_id != login_user_id">
7 <div class="incoming_msg">
8 <div class="incoming_msg_img">
9 <div v-if="user.avatar">
10 <img :src="user.avatar" alt="sunil">
11 </div>
12 <div v-else>
13 <img src="https://ptetutorials.com/images/user-profile.png" alt="sunil">
14 </div>
15 </div>
16 <div class="received_msg">
17 <div class="received_withd_msg">
18 <p>{{message.text}}</p>
19 <span class="time_date"> {{message.hour}}:{{message.min}} {{message.month}} | {{message.date}}</span>
20 </div>
21 </div>
22 </div>
23 </div>
24 <div v-else>
25 <div class="outgoing_msg">
26 <div class="sent_msg">
27 <p>{{message.text}}</p>
28 <div class="row" style="margin: unset;">
29 <span class="time_date mr-1"> {{message.hour}}:{{message.min}} {{message.month}} | {{message.date}}</span>
30 <div class="message_action mt-1">
31 <span class="mt-1 user_active" @click="edit_message_modal(message)">編集</span>
32 <span class="mt-1 user_active" @click.prevent="delete_message(message, $event)">削除</span>
33 </div>
34 </div>
35 </div>
36 <!-- モーダルエリア -->
37 <div id="edit" v-if="showmodal" @click="back(edit_message)">
38 <div id="i" @click.stop>
39 <div class="bg-primary rounded py-2 px-3 mb-2">
40 <input type="text" v-model="edit_message.text">
41 <button type="button" class="btn btn-primary btn-sm" @click="message_update(edit_message)">編集</button>
42 </div>
43 </div>
44 </div>
45 </div>
46 </div>
47 </div>
48 </div>
49 <div class="type_msg">
50 <div class="input_msg_write">
51 <input type="text" v-model="text" class="write_msg px-2 py-2" placeholder="Type a message" />
52 <button class="msg_send_btn px-2" type="button" @click.prevent="send"><i class="far fa-paper-plane"></i></button>
53 </div>
54 </div>
55 </div>
56</template>
57<script>
58export default {
59 props: ['login_user_id', 'user', 'room_id'],
60 data() {
61 return {
62 text: '',
63 room_messages: [],
64 showmodal: false,
65 edit_message: {}
66 }
67 },
68 created() {
69 if(this.room_id) {
70 this.get_messages()
71 }
72 Echo.channel('message-change').listen('MessageChange', (e) => {
73 this.get_messages(e)
74 })
75 },
76 watch: {
77 // eでイベント情報を渡す。
78 room_id: function(e) {
79 this.get_messages(e)
80 }
81 },
82 methods: {
83 ...省略
84 }
85}
86</script>
87
88
上記からエラーの原因を見つける事ができずにいます。
どこか怪しい部分などありますでしょうか？
知見のある方居ましたら、ご教授いただきたいです。
よろしくお願いいたします。
php 7.2.5
vue 2.5.17
Q&A
自己解決
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。