Q&A現在laravelを使用してリアルタイムチャット機能を実装中です。
その途中で下写真のようなエラーが発生しています。
内容は下記です。
app.js:16641 Uncaught TypeError: Vue.component is not a function at Object../resources/js/app.js (app.js:16641) at __webpack_require__ (app.js:58479) at app.js:58629 at Function.__webpack_require__.O (app.js:58516) at app.js:58631 at app.js:58633
app.jsにファイルのエラーがあるみたで、他のサイトなどを参考に修正したものの解消できませんでした。
app.js
1 2// import Vue from 'vue'; 3 4require('./bootstrap'); 5 6window.Vue = require('vue'); 7 8 9Vue.component('example-component', require('./components/ExampleComponent.vue').default); 10 11const app = new Vue({ 12 el: '#app', 13}); 14
一応chat画面のソースコードとレイアウトの元となっているソースコードも貼り付けておきます
chat.blade.php
1@extends('layouts.app') 2 3@section('content') 4<div class="container"> 5 <div class="row"> 6 <div class="col-md-8 col-md-offset-2"> 7 </div> 8 </div> 9 10 {{-- チャットルーム --}} 11 <div id="room"> 12 @foreach($messages as $key => $message) 13 {{-- 送信したメッセージ --}} 14 @if($message->send == \Illuminate\Support\Facades\Auth::id()) 15 <div class="send" style="text-align: right"> 16 <p>{{$message->message}}</p> 17 </div> 18 19 @endif 20 21 {{-- 受信したメッセージ --}} 22 @if($message->recieve == \Illuminate\Support\Facades\Auth::id()) 23 <div class="recieve" style="text-align: left"> 24 <p>{{$message->message}}</p> 25 </div> 26 @endif 27 @endforeach 28 </div> 29 30 <form name="form" method="post" action="/chat/send"> 31 @csrf 32 <textarea name="message" style="width:100%"></textarea> 33 <button type="submit" id="btn_send">送信</button> 34 35 <input type="hidden" name="send" value="{{$param['send']}}"> 36 <input type="hidden" name="recieve" value="{{$param['recieve']}}"> 37 <input type="hidden" name="login" value="{{\Illuminate\Support\Facades\Auth::id()}}"> 38 39 </form> 40</div> 41 42@endsection 43@section('script') 44 <script type="text/javascript"> 45 46 //ログを有効にする 47 Pusher.logToConsole = true; 48 49 var pusher = new Pusher('', { 50 cluster : '', 51 encrypted: true 52 }); 53console.log('アイウエオ'); 54 var channel = pusher.subscribe('chat'); 55 channel.bind('ChatMessageRecieved', function(data) { 56 console.log('received a message'); 57 console.log(data); 58 }); 59 60 //購読するチャンネルを指定 61 var pusherChannel = pusher.subscribe('chat'); 62 63 //イベントを受信したら、下記処理 64 pusherChannel.bind('chat_event', function(data) { 65 66 let appendText; 67 let login = $('input[name="login"]').val(); 68 69 if(data.send === login){ 70 appendText = '<div class="send" style="text-align:right"><p>' + data.message + '</p></div> '; 71 }else if(data.recieve === login){ 72 appendText = '<div class="recieve" style="text-align:left"><p>' + data.message + '</p></div> '; 73 }else{ 74 return false; 75 } 76 77 // メッセージを表示 78 $("#room").append(appendText); 79 80 if(data.recieve === login){ 81 // ブラウザへプッシュ通知 82 Push.create("新着メッセージ", 83 { 84 body: data.message, 85 timeout: 8000, 86 onClick: function () { 87 window.focus(); 88 this.close(); 89 } 90 }) 91 92 } 93 94 95 }); 96 97 98 $.ajaxSetup({ 99 headers : { 100 'X-CSRF-TOKEN' : $('meta[name="csrf-token"]').attr('content'), 101 }}); 102 103 104 // メッセージ送信 105 $('#btn_send').on('click' , function(){ 106 $.ajax({ 107 type : 'POST', 108 url : '/chat/send', 109 data : { 110 message : $('textarea[name="message"]').val(), 111 send : $('input[name="send"]').val(), 112 recieve : $('input[name="recieve"]').val(), 113 } 114 }).done(function(result){ 115 $('textarea[name="message"]').val(''); 116 }).fail(function(result){ 117 118 }); 119 }); 120 </script> 121 122@endsection
app.blade.php
1<!doctype html> 2<html lang="{{ str_replace('_', '-', app()->getLocale()) }}"> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1"> 6 7 <!-- CSRF Token --> 8 <meta name="csrf-token" content="{{ csrf_token() }}"> 9 10 <title>{{ config('app.name', 'Laravel') }}</title> 11 12 <!-- Scripts --> 13 <script src="{{ asset('js/app.js') }}" defer></script> 14 <!-- <script src=“https://js.pusher.com/3.2/pusher.min.js“></script>s --> 15 <script src="https://js.pusher.com/7.0/pusher.min.js"></script> 16 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 17 <!-- <script src=“https://cdnjs.cloudflare.com/ajax/libs/push.js/0.0.11/push.min.js”></script> --> 18 19 <!-- Fonts --> 20 <link rel="dns-prefetch" href="//fonts.gstatic.com"> 21 <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> 22 23 <!-- Styles --> 24 <link href="{{ asset('css/app.css') }}" rel="stylesheet"> 25</head> 26<body> 27 <div id="app"> 28 <nav class="navbar navbar-expand-md navbar-light bg-white shadow-sm"> 29 <div class="container"> 30 <a class="navbar-brand" href="{{ url('/') }}"> 31 {{ config('app.name', 'Laravel') }} 32 </a> 33 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}"> 34 <span class="navbar-toggler-icon"></span> 35 </button> 36 37 <div class="collapse navbar-collapse" id="navbarSupportedContent"> 38 <!-- Left Side Of Navbar --> 39 <ul class="navbar-nav mr-auto"> 40 41 </ul> 42 43 <!-- Right Side Of Navbar --> 44 <ul class="navbar-nav ml-auto"> 45 <!-- Authentication Links --> 46 @guest 47 <li class="nav-item"> 48 <a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a> 49 </li> 50 @if (Route::has('register')) 51 <li class="nav-item"> 52 <a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a> 53 </li> 54 @endif 55 @else 56 <li class="nav-item dropdown"> 57 <a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre> 58 {{ Auth::user()->name }} <span class="caret"></span> 59 </a> 60 61 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> 62 <a class="dropdown-item" href="{{ route('logout') }}" 63 onclick="event.preventDefault(); 64 document.getElementById('logout-form').submit();"> 65 {{ __('Logout') }} 66 </a> 67 68 <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;"> 69 @csrf 70 </form> 71 </div> 72 </li> 73 @endguest 74 </ul> 75 </div> 76 </div> 77 </nav> 78 79 <main class="py-4"> 80 @yield('content') 81 </main> 82 </div> 83</body> 84</html> 85
回答1件
0
自己解決
app.jsファイルに問題があり、起こっていたエラーでした。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
こちらの記述を消すと現れなくなりました。
投稿2021/06/22 23:07
総合スコア3
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。