Rails 7 + 导入地图 + 全日历

Question

我已经设法包含 bootstrap 5，没有任何问题，但是当我尝试包含 fullcalendar 时，我在浏览器控制台上收到此错误：

无法加载模块脚本：需要 JavaScript 模块脚本，但服务器以 MIME 类型“text/css”进行响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。(主.css:1)

所以看起来库已正确导入，但 css 未正确导入

我的刺激控制器：

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

}

有什么想法我做错了吗？

编辑：看起来与以下内容相关： https ://github.com/rails/rails/issues/44239

Answer 1

今天我一直在摆弄这个问题一段时间。我也无法解决 JS 试图引入 CSS 并引发 MIME 类型错误的问题。

不过，我通过供应 CDN 提供的 main.js 文件（在此处引用）成功地让 FullCalendar 与 importmaps 一起运行，然后手动编辑供应文件以将 FullCalendar 函数导出为默认函数。

main.js -> https://cdn.jsdelivr.net/npm/fullcalendar@5.11.0/main.min.js

将其复制到vendor/javascript/fullcalendar.js

将文件固定在 importmap.rb 中：

pin "fullcalendar" # @5.11.0

此时我出现以下错误：

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

编辑新的vendor/javascript/fullcalendar.js 文件并附加到底部：

export default FullCalendar;

然后在刺激控制器中：

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 是像平常一样通过 application.scss 引入的。