Uncaught ReferenceError: FullCalendar не определен (Webpack / NPM)

Когда я загружаю свою страницу, календарь не работает, и на моей консоли у меня есть:

jQuery.Deferred exception: FullCalendar is not defined ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (http://admin.test/agenda:279:20)
at mightThrow (http://admin.test/js/admin.js:30047:29)
at process (http://admin.test/js/admin.js:30115:12) undefined

admin.js:30340 Uncaught ReferenceError: FullCalendar is not defined
at HTMLDocument.<anonymous> (agenda:279)
at mightThrow (admin.js:30047)
at process (admin.js:30115)

1) У меня есть проект laravel с "AdminLTE 3.0.5".

Package.json:

    "devDependencies": {
    "@fullcalendar/bootstrap": "^4.4.0",
    "@fullcalendar/core": "^4.4.0",
    "@fullcalendar/daygrid": "^4.4.0",
    "@fullcalendar/interaction": "^4.4.0",
    "@fullcalendar/timegrid": "^4.4.0",
    "admin-lte": "^3.0.5",
    "axios": "^0.19",
    "bootstrap": "^4.4.1",
    "jquery": "^3.4.1",
    "jquery-ui": "^1.12.1",
    "laravel-mix": "^5.0.1",
    "lodash": "^4.17.13",
    "popper.js": "^1.12",
    "resolve-url-loader": "^2.3.1",
    "sass": "^1.20.1",
    "sass-loader": "^8.0.0",
    "vue": "^2.5.17",
    "vue-template-compiler": "^2.6.10"
},

2) Я импортирую пакет Fullcalendar со своим веб-пакетом:

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

app.js:

require('./bootstrap');

window.Vue = require('vue');

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

const app = new Vue({
    el: '#app',
});

require('jquery-ui/ui/widgets/draggable');
require('admin-lte');

/* Table */
require('../../node_modules/admin-lte/plugins/datatables/jquery.dataTables.min.js');
require('../../node_modules/admin-lte/plugins/datatables-bs4/js/dataTables.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/dataTables.responsive.min.js');
require('../../node_modules/admin-lte/plugins/datatables-responsive/js/responsive.bootstrap4.min.js');
require('../../node_modules/admin-lte/plugins/bs-custom-file-input/bs-custom-file-input.min.js');

calendar.js:

/* Calendar */
require('@fullcalendar/core');
require('@fullcalendar/daygrid');
require('@fullcalendar/timegrid');
require('@fullcalendar/interaction');
require('@fullcalendar/bootstrap');

3) В моем vue я копирую / прошиваю страницу календаря AdminLTE3 и только добавить мои 2 файла микса до:

<script src="{{ mix('js/app.js') }}"></script> 
<script src="{{ mix('js/calendar.js') }}"></script> 

<script>
  $(function () {

    /* initialize the external events
     -----------------------------------------------------------------*/
    function ini_events(ele) {
      ele.each(function () {
[...]

Я использую функцию «require ()» для вызова всех файлов js, и когда я запускаю «npm run dev», все работает, без ошибок. Я думаю, что это порядок файлов js, но он тот же порядок, что и на странице календаря AdminLTE3 ... или я слепой. Я изменил все версии пакета календаря, jquery и jquery-ui, чтобы они были такими же, как эта страница (4.4.0 для моей версии dl).

Кто-нибудь может мне помочь, пожалуйста?


webpack npm laravel fullcalendar fullcalendar-4
person Simon    schedule 10.06.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

У меня есть решение.

Импортирует такие файлы в мой 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';

И вам не нужны эти две строчки в моем скрипте

<!--
    var Calendar = FullCalendar.Calendar;
    var Draggable = FullCalendarInteraction.Draggable;
-->
person Simon    schedule 15.06.2020
comment
Это не работает: / ... у меня есть Uncaught ReferenceError: FullCalendar не определен - person Simon; 29.06.2020