CODEWITHSUNDEEP
ruby-on-railsfullcalendarfullcalendar-5ruby-on-rails-7stimulusjs
letz
letz

Reputation: 1792

Rails 7 + importmap + fullcalendar

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

Upvotes: 6

Views: 2108

Answers (2)

Ricardo
Ricardo

Reputation: 191

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.

Upvotes: 1

timpwbaker
timpwbaker

Reputation: 126

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/fullcalendar@5.11.0/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.

Upvotes: 2

Related Questions