我已经成功地包括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
2条答案
按热度按时间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中:
在这一点上,我有以下错误:
编辑新的vendor/javascript/fullcalendar.js文件,并在底部追加:
然后在刺激控制器中:
Css只是通过application.scss正常引入。
vohkndzv2#
不确定是否相关,但在您指出此issue之后,我只需将正确的扩展名添加到我的导入(.js)中,它就可以工作了。
在您的例子中,我会在每个导入中添加
.js
。有一件事引起了我的注意,那就是错误指向了一个
main.css
文件。如果你有一个导入调用这个文件,试着添加扩展名。