Rails无Webpacker通过Stimulus引入FullCalendar报无default导出错误怎么办

报错原因 #

你引入的是@fullcalendar/core的全局构建版本（文件名带global标识），这类版本不会做ES模块导出，而是直接把FullCalendar对象挂载到浏览器window全局对象上，所以你用ES模块的default import语法去导入的时候，自然找不到对应的默认导出，就抛出了该错误。

修复方案 #

方案1：改用ES模块版本的FullCalendar引入 #

把控制器里的导入语句换成ES模块构建的CDN地址，同时补充视图依赖的插件导入即可：

// 替换原有global版本的导入，去掉文件名中的.global标识
import FullCalendar from 'https://cdn.jsdelivr.net/npm/@fullcalendar/core@5.10.0/main.min.js'
// 额外导入dayGrid视图依赖的插件，ES模块版本不会默认打包所有功能
import dayGridPlugin from 'https://cdn.jsdelivr.net/npm/@fullcalendar/daygrid@5.10.0/main.min.js'

export default class extends Controller {
  static targets = ["calendar"]
  connect() {
    this.init()
  }

  init() {
    this.calendar = new FullCalendar.Calendar(this.calendarTarget, {
      initialView: 'dayGridMonth',
      plugins: [dayGridPlugin] // 注册引入的视图插件
    })
    this.calendar.render()
  }
}

方案2：直接使用全局挂载的FullCalendar，删除导入语句 #

你引入的global版本已经自动把FullCalendar挂载到了全局window对象，不需要主动导入：

// 删掉原有的第一行import FullCalendar语句即可
export default class extends Controller {
  static targets = ["calendar"]
  connect() {
    this.init()
  }

  init() {
    this.calendar = new FullCalendar.Calendar(this.calendarTarget, {
      initialView: 'dayGridMonth',
    })
    this.calendar.render()
  }
}

补充注意：如果你使用的是Stimulus 3及以上版本，需要将HTML中的target属性写法更新为带控制器前缀的格式，否则会找不到目标节点：

<div data-controller="fullcalendar">
  <div data-fullcalendar-target="calendar"></div>
</div>

内容的提问来源于stack exchange，提问作者cisco