Laravel-Echoのimportに失敗します。対応方法をご教示下さい><

Question

###前提・実現したいこと
Laravel5.4を使ってチャット機能のあるサービスを作成中です。

Laravel-Echoを使おうと思い公式をみながら進めているのですが、最初のimportの段階でうまく行きません。
<参考にしているサイト>
https://readouble.com/laravel/5.4/ja/broadcasting.html#installing-laravel-echo

###発生している問題・エラーメッセージ
以下の手順で進めています。
①Laravel-echoのインストール

npm install --save laravel-echo pusher-js

②resources/assets/js/bootstrap.jsにlaravel-echoのimportなどを記述

// resources/assets/js/bootstrap.js
import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({
    broadcaster: 'socket.io',
    host: window.location.hostname + ':6001'
});

③public/js/index.jsにイベントを受け取った際の処理を記述

// public/js/index.js
Echo.private('chat-room.' + user_id + '.' + friend_id)
    .listen('EnterChatRoom', (e) => {
      console.log(e);
    });

④EnterChatRoomイベントのbroadcastOn()メソッドを定義
($user,$friendなどはコンストラクタに記述済み)

//EnterChatRoom.php
class EnterChatRoom implements ShouldBroadcast
{
   // 上部省略
   public function broadcastOn()
   {
      return new PrivateChannel('chat-room.'.$this->user->id.'.'.$this->friend->id);
   }
}

⑤コントローラーでイベント発行

//RoomController.php
event(new EnterChatRoom($user,$friend));

⑥ここまでやって一旦実行

この段階で下記のようなエラーが出ます。

Uncaught ReferenceError: Echo is not defined

ここでresources/assets/js/bootstrap.jsが読み込まれてないのかと思い、public/js/index.js内にlaravelのimportとインスタンス化を記述し直したのですが、今度は以下のようなメッセージが出ます。

index.js:2 Uncaught SyntaxError: Unexpected token import

ソースを見ると、以下の部分で上記エラーが発生しているようです。

// public/js/index.js
import Echo from 'laravel-echo'

こちら以下の２つ問題があると考えてます。
①bootstarp.jsが読み込まれていない(？)
②index.jsにimportを記述した場合laravel-echoがimport出来ない
どちらが根本的な問題はわかりませんが、
上記参考にlaravel-echoをimport出来ない原因、もしくは対処法がありましたらご教示頂けますと幸いです。
また、状況についてご質問ございましたらコメント頂けますと幸いです。

###補足情報(言語/FW/ツール等のバージョンなど)
laravel5.4
laravel-echo@1.3.0
pusher-js@4.1.0
laravel-echo-server1.2.9

Answer 1

Unexpected token importのエラーメッセージからみるに、
importはes2015からの機能なので、インストールしているnodeが対応していなければ、
Babelを間に挟む必要かと思うのでLaravel Mixでビルドが必要なのではないでしょうか
あるいはnodeのバージョンを上げると解決するかもしれません

Comments

[YorihiroKatsuki]

ありがとうございます！
Laravel Mixでビルドしたらbootstrap.jsが読み込まれるようになりました！