Maximum call stack size exceeded when binding FullCalendar in Aurelia app

Question

I am trying to initialize a JQuery plugin ( FullCalendar ) inside my Aurelia, TypeScript-driven app. I am new to web developement and just trying to get a minimal example to work. I used this template as the starting point.

I followed a structure suggested in this snippet . I seem to be able to at least get to initialisation, but then some kind of infinite recursion/loop keeps calling my constructor:

    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 

The suggested fix of including as FullCalendar as require from also doesn't work, no matter if as @inlineView or directly in my View (html):

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

As I then get a following error from my ASP.Net service (seems to be WebPack configuration issue):

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);

My 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));
  }
} 

and my View (calendar.html):

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

EDIT: Following Rory's suggestion I tried to remove event handlers to show a minimal snippet, this did not help as I still get the same exception. I believe the problem is in binding?

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

Inside your calendar custom element template, you have another calendar custom element, which creates infinite loop of calendars. Im not sure what your intention is but easiest fix is change the calendar in the template to some other name