Rails 7 + importmap + fullcalendar

Question

I've manage to include bootstrap 5 without any issues, but when I try to include fullcalendar I get this error on browser console:

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/css". Strict MIME type checking is enforced for module scripts per HTML spec. (main.css:1)

So it looks like the library is imported correctly but the css isn't

my stimulus controller:

import { Controller } from "@hotwired/stimulus"

import moment from "moment"


import { Calendar } from '@fullcalendar/core';
import dayGridPlugin from '@fullcalendar/daygrid';
import timeGridPlugin from '@fullcalendar/timegrid';
import listPlugin from '@fullcalendar/list';

export default class extends Controller {

  static targets = [ "calendar" ]

  connect() {
    console.log(this.calendarTarget)
    let calendar = new Calendar(this.calendarTarget, {
    plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ],
    initialView: 'dayGridMonth',
    headerToolbar: {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth,timeGridWeek,listWeek'
    }
    });
  }

}

Any ideias what I'm doing it wrong?

EDIT: looks like is related to: https://github.com/rails/rails/issues/44239

Scouring

Hey, did you find any solution to this ? – Cochrane

not yet. if you found a solution please add here – Scouring

Do you use importmaps or webpacker? – Dikmen

I used importmaps, I don't have issues with webpack – Scouring

Answer 1

I have been fiddling with this problem for a while today. I too couldn't get past the issue with the JS trying to pull in the CSS and raising MIME type errors.

However, I have managed to get FullCalendar running with importmaps by vendoring the main.js file provided by the CDN (referenced here), and then manually editing the vendored file to export the FullCalendar function as the default.

main.js -> https://cdn.jsdelivr.net/npm/[email protected]/main.min.js

Copy this into vendor/javascript/fullcalendar.js

Pin the file in importmap.rb:

pin "fullcalendar" # @5.11.0

At this point I have the following error:

Failed to register controller ... SyntaxError: The requested module 'fullcalendar' does not provide an export named 'default' 

Edit your new vendor/javascript/fullcalendar.js file and append to the bottom:

export default FullCalendar;

And then in the stimulus controller:

import { Controller } from "@hotwired/stimulus"
import FullCalendar from 'fullcalendar';

export default class extends Controller {
  connect() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
      initialView: 'dayGridMonth'
    });
    calendar.render();
  }
}

Css is just brought in via application.scss as normal.

Couteau

This worked for me, too. I think it's just the export default FullCalendar; I spend an inordinate amount of time to debug this and I was, for some reason, really apprehensive to do what you did. But, it works! Why is it that they don't add this line to their library? It's so weird. – Affusion

Answer 2

Not sure if related, but after you pointed out this issue, I just added the correct extension to my import (.js) and it worked.

In your case, i would add the .js in each import. For example

import moment from "moment.js"

One thing that caught my atention is that the error points to a main.css file. If you have an import calling this file, try to add the extension.

Sweeney