🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

Q&A

解決済

1回答

1657閲覧

herokuでデプロイするとTypeError: Cannot read property 'toLowerCase' of undefinedが表示されます

tenlife

総合スコア70

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Heroku

HerokuはHeroku社が開発と運営を行っているPaaSの名称です。RubyやNode.js、Python、そしてJVMベース(Java、Scala、Clojureなど)の複数のプログラミング言語をサポートしている。

Laravel

LaravelとはTaylor Otwellによって開発された、オープンソースなPHPフレームワークです。Laravelはシンプルで表現的なシンタックスを持ち合わせており、ウェブアプリケーション開発の手助けをしてくれます。

0グッド

0クリップ

投稿2021/01/28 22:38

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

こちらvueコンポーネントのcssに不備がありました。
完全に見落としてました。エラー文もっと読みます。

投稿2021/01/29 23:29

tenlife

総合スコア70

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問