Смешайте файлы - Как exe c js в поле зрения (blade. php Laravel)

Question

У меня есть этот код в моем Laravel Project.

calendar. js:

/* Calendar */
import { Calendar } from '@fullcalendar/core';
import dayGrid from '@fullcalendar/daygrid';
import timeGrid from '@fullcalendar/timegrid';
import interaction, { Draggable } from '@fullcalendar/interaction';
import bootstrap from '@fullcalendar/bootstrap';

import frLocale from '@fullcalendar/core/locales/fr';


/* Calendar */
document.addEventListener('DOMContentLoaded', function() {
  var calendarEl = document.getElementById('calendar');

    /* initialize the calendar
     -----------------------------------------------------------------*/
    //Date for the calendar events (dummy data)
    var date = new Date()
    var d    = date.getDate(),
        m    = date.getMonth(),
        y    = date.getFullYear()

  var containerEl = document.getElementById('external-events');
  var checkbox = document.getElementById('drop-remove');
  var calendarEl = document.getElementById('calendar');


    // initialize the external events
    // -----------------------------------------------------------------

    new Draggable(containerEl, {
      itemSelector: '.external-event',
      eventData: function(eventEl) {
        console.log(eventEl);
        return {
          title: eventEl.innerText,
          backgroundColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
          borderColor: window.getComputedStyle( eventEl ,null).getPropertyValue('background-color'),
          textColor: window.getComputedStyle( eventEl ,null).getPropertyValue('color'),
        };
      }
    });

  var calendar = new Calendar(calendarEl, {
    plugins: [ dayGrid, timeGrid, interaction, bootstrap ],
    locale: frLocale,
  header    : {
    left  : 'prev,next today',
    center: 'title',
    right : 'dayGridMonth,timeGridWeek,timeGridDay'
  },
      'themeSystem': 'bootstrap',
      //Random default events
      events    : [
        {
          title          : 'All Day Event',
          start          : new Date(y, m, 1),
          backgroundColor: '#f56954', //red
          borderColor    : '#f56954', //red
          allDay         : true
        }
      ],
      editable  : true,
      droppable : true, // this allows things to be dropped onto the calendar !!!
      selectable: true,
    select: function(info) {
      var dateS = prompt('Saisissez le nom de la tâche :' );
          if (dateS) { // valid?
            calendar.addEvent({
              title: dateS,
              start: info.startStr,
              end: info.endStr,
            });
          } else {
            alert('Veuillez entrer un nom de tâche');
          }

    },
      drop      : function(info) {
        // is the "remove after drop" checkbox checked?
        if (checkbox.checked) {
          // if so, remove the element from the "Draggable Events" list
          info.draggedEl.parentNode.removeChild(info.draggedEl);
        }
      }  
  });

  calendar.render();

    /* ADDING EVENTS */
    var currColor = '#3c8dbc' //Red by default
    //Color chooser button
    var colorChooser = $('#color-chooser-btn')
    $('#color-chooser > li > a').click(function (e) {
      e.preventDefault()
      //Save color
      currColor = $(this).css('color')
      //Add color effect to button
      $('#add-new-event').css({
        'background-color': currColor,
        'border-color'    : currColor
      })
    })
    $('#add-new-event').click(function (e) {
      e.preventDefault()
      //Get value and make sure it is not null
      var val = $('#new-event').val()
      if (val.length == 0) {
        return
      }

      //Create events
      var event = $('<div />')
      event.css({
        'background-color': currColor,
        'border-color'    : currColor,
        'color'           : '#fff'
      }).addClass('external-event')
      event.html(val)
      $('#external-events').prepend(event)

      //Add draggable funtionality
      ini_events(event)

      //Remove event from text input
      $('#new-event').val('')
    })

});

schedule.blade. php (мое мнение)

[...]
<div id="calendar"></div>
<script src="{{ mix('js/calendar.js') }}"></script>
<script>

</script>

webpack.mix. js

mix.js('resources/js/calendar.js', 'public/js/calendar.js')

Мой код работает хорошо. Но мне нужно настроить мой js скрипт (из календаря. js) на мой взгляд (повестка дня. Клинок. php). Зачем ? потому что мне нужно вызвать свой API REST, чтобы добавить несколько событий. Но если я помещаю свой скрипт в свое представление (кроме импорта), у меня появляется эта ошибка:

Uncaught ReferenceError: Draggable is not defined

Если я помещаю строки импорта мое мнение тоже, у меня это

Uncaught SyntaxError: Невозможно использовать оператор импорта вне модуля

Как я могу это исправить? или что мне нужно сделать, чтобы объявить мою ценность (например, Draggable) в моем представлении?