Rails 7 + importmap + fullcalendar答案

【问题标题】：Rails 7 + importmap + fullcalendarRails 7 + importmap + fullcalendar
【发布时间】：2022-06-27 20:51:25
【问题描述】：

我已经成功地包含了 bootstrap 5，但是当我尝试包含 fullcalendar 时，我在浏览器控制台上收到了这个错误：

加载模块脚本失败：需要一个 JavaScript 模块脚本，但是服务器以“text/css”的 MIME 类型响应。严格的 MIME 类型根据 HTML 规范对模块脚本进行检查。 (main.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

【问题讨论】：

嘿，你找到解决办法了吗？
还没有。如果您找到解决方案，请在此处添加
你使用 importmaps 还是 webpacker？
我使用了 importmaps，我的 webpack 没有问题

标签： ruby-on-rails fullcalendar fullcalendar-5 ruby-on-rails-7 stimulusjs

【解决方案1】：

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

但是，我通过出售 CDN (referenced here) 提供的 main.js 文件，然后手动编辑出售的文件以将 FullCalendar 函数导出为默认值，设法让 FullCalendar 与 importmaps 一起运行。

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'

编辑该文件并附加到底部：

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 引入。

【讨论】：