Uncaught TypeError: Vue.component is not a function

現在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件

自己解決

app.jsファイルに問題があり、起こっていたエラーでした。

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

こちらの記述を消すと現れなくなりました。

投稿2021/06/22 23:07

royal1997

総合スコア3

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

Uncaught TypeError: Vue.component is not a function

関連した質問