Why does fullcalendar give the error that it does not provide an export called 'default'?

Question

I am trying to use the fullcalenar library through stimulusjs to display the calendar in a rails app, without a webpacker. To start I just want to show the calendar, without complexity, as in the documentation, and the controller I am trying to do looks like this:

import FullCalendar from 'https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.10.0/main.global.min.js'

export default class extends Controller {
  static targets = ["calendar"]
  connect() {

    this.init()
  }

  init() {

    this.calendar = new FullCalendar.Calendar(this.calendarTarget, {
      initialView: 'dayGridMonth',
    })

    this.calendar.render()
  }

}

<link href="https://cdn.jsdelivr.net/npm/fullcalendar@5.10.0/main.min.css" rel="stylesheet" />

<div data-controller="fullcalendar">
  <div data-target="calendar"></div>
</div>

the error that it throws and that I do not understand is the following:

Failed to autoload controller: fullcalendar SyntaxError: The requested module 'blob:http://localhost:3000/1c3e6673-aecc-4144-b5d6-471fb03b5e0f' does not provide an export named 'default'

Answer 1

FullCalendar has two primary installation methods. You're using the one from this documentation page, which does not export ES6 modules. It's more like the old (pre-Gulp/Webpack) way of importing global variables.

If you want to import inside your Stimulus controllers, you'll either need to use Webpack or something importmaps, just like the other FullCalendar installation page says.

If you want something basic, I'd recommend importmaps (https://github.com/rails/importmap-rails). It requires very little configuration compared to Webpack, and will allow what you're trying to do.