ruby-on-rails Rails 7 + importmap + fullcalendar

lyfkaqu1  于 2023-04-08  发布在  Ruby
关注(0)|答案(2)|浏览(206)

我已经成功地包括bootstrap 5没有任何问题,但当我尝试包括fullcalendar时,我在浏览器控制台上得到这个错误:
无法加载模块脚本:需要JavaScript模块脚本,但服务器响应的MIME类型为“text/css”。根据HTML规范(main.css:1),对模块脚本强制执行严格的MIME类型检查
因此,看起来库导入正确,但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

xqnpmsa8

xqnpmsa81#

今天我一直在处理这个问题,我也无法解决JS试图拉入CSS并引发MIME类型错误的问题。
然而,我已经设法让FullCalendar与importmaps一起运行,方法是出售CDN(referenced here)提供的main.js文件,然后手动编辑出售的文件以将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正常引入。

vohkndzv

vohkndzv2#

不确定是否相关,但在您指出此issue之后,我只需将正确的扩展名添加到我的导入(.js)中,它就可以工作了。
在您的例子中,我会在每个导入中添加.js

import moment from "moment.js"

有一件事引起了我的注意,那就是错误指向了一个main.css文件。如果你有一个导入调用这个文件,试着添加扩展名。

相关问题