Laravel Pusher 中未捕获的语法错误

Question

我正在学习使用 Pusher 和 Laravel 进行实时消息系统开发。我正在关注这个教程。 https://webjourney.dev/laravel-pusher-real-time-chat-application-build-with-javascript-jquery

我的刀片文件代码如下。

@extends('saas.frontend.layouts.app')
@section('content')
    <div class="property-details-area">
        <div class="row">
            <div class="col-md-12">
                    <p class="property-home-part">                        
                        {{ $information->name }}
                    </p>
                </div>
            </div>
        </div>

        <div class="app">
            <div class="row">
        
                <div class="col-sm-6 offset-sm-3 my-2">
                    <input type="text" class="form-control" name="username" id="username" placeholder="Enter a user ..........">
                </div>
        
                <div class="col-sm-6 offset-sm-3">
                    <div class="box box-primary direct-chat direct-chat-primary">
        
                        <div class="box-body">
                            <div class="direct-chat-messages" id="messages"></div>
                        </div>
        
                        <div class="box-footer">
                            <form action="#" method="post" id="message_form">
                                <div class="input-group">
                                    <input type="text" name="message" id="message" placeholder="Type Message ..." class="form-control">
                                    <span class="input-group-btn">
                                        <button type="submit" id="send_message"  class="btn btn-primary btn-flat">Send</button>
                                  </span>
                                </div>
                            </form>
                        </div>
        
                    </div>
                </div>
        
            </div>
        </div>
    </div>

    @push('style')
    <style>
        body{
            margin-top:20px;
            background:#eee;
        }
        .box {
            position: relative;
            border-radius: 3px;
            background: #ffffff;
            border-top: 3px solid #d2d6de;
            margin-bottom: 20px;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
        }
        .box.box-primary {
            border-top-color: #3c8dbc;
        }

        .box-body {
            border-top-left-radius: 0;
            border-top-right-radius: 0;
            border-bottom-right-radius: 3px;
            border-bottom-left-radius: 3px;
            padding: 10px;
        }

        .direct-chat .box-body {
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
            position: relative;
            overflow-x: hidden;
            padding: 0;
        }
        .direct-chat-messages {
            padding: 10px;
            height: 150px;
            overflow: auto;
        }
    </style>
@endpush
    @push('script')
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
        <script src ="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>

            import Echo from 'laravel-echo';
            import Pusher from 'pusher-js';

            window.Pusher = Pusher;

            window.Echo = new Echo({
                broadcaster: 'pusher',
                key: import.meta.env.VITE_PUSHER_APP_KEY,
                cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
                forceTLS: true
            });

            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });

            $(document).ready(function(){
                $(document).on('click','#send_message',function (e){
                    e.preventDefault();

                    let username = $('#username').val();
                    let message = $('#message').val();

                    if(username == '' || message == ''){
                        alert('Please enter both username and message')
                        return false;
                    }

                    $.ajax({
                        method:'post',
                        url:'/send-message',
                        data:{username:username, message:message},
                        success:function(res){
                            //
                        }
                    });
                });
            });

            window.Echo.channel('chat')
            .listen('.message',(e)=>{
                $('#messages').append('<p><strong>'+e.username+'</strong>'+ ': ' + e.message+'</p>');
                $('#message').val('');
            });
        </script>
    @endpush
@endsection

但是我在控制台收到错误

Uncaught SyntaxError: import declarations may only appear at top level of a module

。

如何解决这个错误？

Answer 1

我很高兴帮助您解决您在 Laravel Pusher 聊天应用程序的 Blade 文件中遇到的“未捕获的语法错误：导入声明可能仅出现在模块的顶层”错误。

理解错误： 出现此错误的原因是现代 JavaScript 模块（使用该属性）有严格的要求：导入语句必须放置在脚本的最开头，位于任何其他代码之前。这确保了正确的模块加载和执行。

解决方案： 要修复此错误，您有两种主要方法：

1。将

import

语句移至顶部：

在

<script>

部分的

@push('script')

标签内，重新排列代码，以便

import

和

Echo

的

Pusher

语句位于任何其他 JavaScript 代码之前：

@push('script')
    <script>
        import Echo from 'laravel-echo';
        import Pusher from 'pusher-js';

        window.Pusher = Pusher;

        // Rest of your JavaScript code
    </script>
@endpush

2。使用捆绑器（推荐）：

如果您的项目更复杂或者您计划使用多个模块，请考虑使用 Webpack 或 Parcel 等 JavaScript 捆绑器。这些工具可以处理模块依赖项（包括导入），并将您的代码捆绑到单个优化文件中。

以下是捆绑器方法的一般细分：

1. 安装捆绑程序：选择您喜欢的捆绑程序（例如，

   npm install webpack

   或

   npm install parcel

   ）。
2. 配置捆绑器：创建一个指定入口点的配置文件（主要 JavaScript 文件）和捆绑文件的输出位置。
3. 更新您的 Blade 文件：引用捆绑器生成的捆绑文件，而不是单独的

   <script>

   标签。