Laravel, правильный способ импорта javascript в шаблоны Blade

Я использую Laravel 5.6. Эта страница у меня не работал.

pizza / index.blade.php выглядит так:

@extends('layouts.app')


@section('content')
    <!-- Styles -->
    <link href = "{{ asset('css/pizza.css') }}" rel = "stylesheet">
    <!-- Scripts -->
    <script src = "{{ asset('js/components/pizza.js')}}"></script>
    <div class = "container">
        <div class = "row justify-content-center">
            <div class = "card">
                <div class = "card-header">Pizza</div>
                <div class = "card-body">
                    <form action = "/pizzas" method = "post">
                        @if ($errors->any())
                            <div class = "alert alert-danger" role = "alert">
                                Please fix the following errors
                            </div>
                        @endif
                        @include('pizza.table')
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection

пицца / table.blade.php:

<div class = "pizza-selection">
    <b>Thanks god its pizza day! Select your pizza of the day!</b>
    <table id = "pizzas" class = "md-box">
        <tr>
            ...
        </tr>
        @foreach ($pizzas as $pizza)
            ...
        @endforeach
        <tr>
            ...
            <input type = "button" class = "md-box btn btn-default" 
             id = "add_new_pizza" onClick = "addPizza()" value = "Add Pizza!">
            </td>
        </tr>
    </table>
    ...

Я получаю справочную ошибку, когда нажимаю кнопку «add_new_pizza», onClick = «addPizza ()», addPizza () не определен. Однако я пытаюсь импортировать pizza.js в index.blade.php

<script src = "{{ asset('js/components/pizza.js')}}"></script>

распечатка ресурса ('js / components / pizza.js') возвращает http: // локальный: 8080 / js / компоненты / pizza.js, который мне кажется правильным.

public / js / components / pizza.js выглядит следующим образом:

import PizzaService from '../services/PizzaService.js';

async function addPizza(){
    // some functionality
}

Это также работало, когда у меня была функция addPizza () внутри скрипта на .blade.php.

Также найдите репозиторий на GitHub, если вам понадобится дополнительная проверка кода: https://github.com/andrelandgraf/laravel-docker

Обновлено: когда я копирую pizza.js внутри <script><script>, он работает нормально, но я получаю SyntaxError: import declarations may only appear at top level of a module. Эта ошибка SyntaxError исчезает, когда я импортирую скрипт через src, как вы можете видеть в моих примерах кода. Для меня это означает, что скрипт вообще не загружается.

EDIT2 и решение: я использовал решение @kerbholz. Я добавил @stack('scripts') в нижнюю часть body в app.blade.php и внутри @section('content') из index.blade.php, я знаю @push('stack') файл pizza.js.

Я сделал еще один шаг, но все еще получаю SyntaxError, указанное в EDIT. Есть ли обходной путь для этого, или мне просто нужно удалить импорт PizzaService.js и добавить <scipt>-Tag для этого файла?

EDIT3: Хорошо, эта проблема не связана. Похоже, что модули ES6 еще не поддерживаются браузерами.