Максимальный размер стека вызовов превышен при привязке FullCalendar в приложении Aurelia

Question

Я пытаюсь инициализировать плагин JQuery ( FullCalendar ) в моем приложении Aurelia, управляемом TypeScript. Я новичок в веб-разработке и просто пытаюсь получить минимальный пример для работы. Я использовал этот шаблон в качестве отправной точки.

Я следовал структуре, предложенной в этом фрагменте . Кажется, я могу хотя бы добраться до инициализации, но затем какая-то бесконечная рекурсия / цикл продолжает вызывать мой конструктор:

    aurelia-logging-console.js:47 ERROR [app-router] Error: Error invoking calendar. Check the inner error for details.
------------------------------------------------
Inner Error:
Message: Maximum call stack size exceeded
Inner Error Stack:
RangeError: Maximum call stack size exceeded
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6683:43)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
    at Container._get (http://localhost:6213/dist/vendors~app.js?v=5idOSe8epNjIdNWRygcEushmRuUc29hR3OzFxAbI6T8:6691:26)
End Inner Error Stack 

Предлагаемое исправление включения в качестве FullCalendar в качестве require from также не работает, независимо от того, является ли оно @inlineView или непосредственно в моем представлении (html):

@inlineView('<template><require from="../../../../node_modules/fullcalendar/dist/fullcalendar.css"></require><require from="../../../../node_modules/fullcalendar"></require></template>') 

Когда я получаю следующую ошибку от моей службы ASP.Net (похоже, это проблема конфигурации WebPack):

Microsoft.AspNetCore.NodeServices:Error: C:\Users\***\AureliaDotnetTemplate\node_modules\aurelia-webpack-plugin\dist\PreserveModuleNamePlugin.js:145
throw new Error("PreserveModuleNamePlugin: Unable to find root of module " + name);

Моя ViewModel (calendar.ts):

import {
  autoinject, inject, bindable, bindingMode,
  customElement, BindingEngine
} from 'aurelia-framework';
import * as $ from "jquery";
import * as moment from "moment";
import * as fullCalendar from 'fullcalendar';

@customElement('calendar')
@autoinject
export class calendar {
  @bindable weekends = true;
  @bindable dayClick;
  @bindable eventClick;
  @bindable events = [];
  @bindable options;
  @bindable view;
  subscription = null;
  calendar: any;

  constructor(private element: Element, private bindingEngine: BindingEngine) {

    this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe((splices) => { this.eventListChanged(splices) });
  }

  eventListChanged(splices) {
    if (this.calendar)
      this.calendar.fullCalendar('refetchEvents');
  }

  eventsChanged(newValue) {
    if (this.subscription !== null) {
      this.subscription.dispose();
    }
    this.subscription = this.bindingEngine.collectionObserver(this.events).subscribe((splices) => { this.eventListChanged(splices) });

    if (this.calendar)
      this.calendar.fullCalendar('refetchEvents');
  }

  attached() {
    console.log('calendar attached');
    console.log(this.element);
    console.log($(this.element));

    this.calendar = $(this.element);
    let eventSource = (start, end, timezone, callback) => {
      callback(this.events);
    }

    let defaultValues = {
      defaultView: this.view || 'month',
      weekends: this.weekends,
      firstDay: 1,
      dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
      eventClick: (event) => this.eventClick(event),
      events: eventSource
    }

    this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
  }
} 

и мой вид (calendar.html):

<template>
    <h1>Calendar</h1>
    <calendar></calendar>
</template>

EDIT: Следуя предложению Рори, я попытался удалить обработчики событий, чтобы показать минимальный фрагмент кода, это не помогло, поскольку я все еще получаю то же исключение. Я полагаю, что проблема в связывании?

import {
  autoinject, inject, bindable,
  customElement
} from 'aurelia-framework';
import * as $ from "jquery";
import * as moment from "moment";
import * as fullCalendar from 'fullcalendar';

@autoinject
@customElement('calendar')
export class calendar {
  @bindable weekends = true;
  @bindable dayClick;
  @bindable eventClick;
  @bindable events = [];
  @bindable options;
  @bindable view;
  subscription = null;
  calendar: any;

  constructor(private element: Element) {}

  attached() {
    console.log('calendar attached');
    console.log(this.element);
    console.log($(this.element));

    this.calendar = $(this.element);
    let eventSource = (start, end, timezone, callback) => {
      callback(this.events);
    }

    let defaultValues = {
      defaultView: this.view || 'month',
      weekends: this.weekends,
      firstDay: 1,
      dayClick: (date, jsEvent, view) => this.dayClick(date, jsEvent, view),
      eventClick: (event) => this.eventClick(event),
      events: eventSource
    }

    this.calendar.fullCalendar(Object.assign(defaultValues, this.options));
  }
} 

Answer 1

Внутри шаблона настраиваемого элемента календаря у вас есть другой настраиваемый элемент календаря, который создает бесконечный цикл календарей. Я не уверен, что вы хотите, но самое простое - поменять календарь в шаблоне на другое имя