导入@fullcalendar/core模块时出现TypeError错误求助

架构老林

2026-7-18

解决FullCalendar模块导入错误：Uncaught TypeError: Failed to resolve module specifier

浏览器原生ES模块系统不支持直接导入@fullcalendar/core这类npm裸包标识符，仅识别以/、./、../开头的相对/绝对路径。以下是三种可行的解决方法：

方案1：使用Laravel Vite（推荐，Laravel 9+默认）

Vite会自动处理npm包的模块解析，步骤如下：

将你的availability.js文件移至resources/js/admin_system/目录（符合Laravel资源管理规范），或在resources/js/app.js中导入它：
```
// resources/js/app.js
import './admin_system/availability.js';
```
确保vite.config.js配置正确（默认配置即可适配多数场景）。
替换Blade模板中的原有script标签，改用Vite指令引入资源：
```
@vite(['resources/js/app.js'])
```
运行开发命令npm run dev，或生产环境构建命令npm run build，Vite会自动打包所有依赖并解析模块路径。

方案2：改用FullCalendar UMD版本（无需打包工具）

直接引入UMD格式的脚本，使用全局变量替代ES模块导入：

将node_modules/@fullcalendar/core/main.min.css、node_modules/@fullcalendar/core/main.min.js、node_modules/@fullcalendar/interaction/interaction.min.js复制到public/vendor/fullcalendar/目录下。

在Blade模板中引入样式和脚本：

<link rel="stylesheet" href="{{ asset('vendor/fullcalendar/main.min.css') }}">
<script src="{{ asset('vendor/fullcalendar/main.min.js') }}"></script>
<script src="{{ asset('vendor/fullcalendar/interaction.min.js') }}"></script>

修改availability.js，去掉import语句，改用全局变量：

document.addEventListener('DOMContentLoaded', function() {
  let draggableEl = document.getElementById('mydraggable');
  let calendarEl = document.getElementById('mycalendar');
  let calendar = new FullCalendar.Calendar(calendarEl, {
    plugins: [FullCalendar.interaction],
    droppable: true
  });
  calendar.render();
  new FullCalendar.Draggable(draggableEl);
});

引入该JS文件时去掉type="module"属性：

<script src="{{ url('/admin_system/js/availability.js') }}"></script>

方案3：使用浏览器原生Import Maps（需注意兼容性）

通过Import Maps映射裸模块到实际文件路径：

将node_modules/@fullcalendar/core/index.esm.js、node_modules/@fullcalendar/interaction/index.esm.js复制到public/vendor/fullcalendar/目录下。

在Blade模板的<head>中添加Import Map配置：

<script type="importmap">
{
  "imports": {
    "@fullcalendar/core": "{{ asset('vendor/fullcalendar/core/index.esm.js') }}",
    "@fullcalendar/interaction": "{{ asset('vendor/fullcalendar/interaction/index.esm.js') }}"
  }
}
</script>

保持原有type="module"的script引入方式，浏览器会通过Import Map解析模块路径。

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

导入@fullcalendar/core模块时出现TypeError错误求助

方案1：使用Laravel Vite（推荐，Laravel 9+默认） #

方案2：改用FullCalendar UMD版本（无需打包工具） #

方案3：使用浏览器原生Import Maps（需注意兼容性） #

方案1：使用Laravel Vite（推荐，Laravel 9+默认）

方案2：改用FullCalendar UMD版本（无需打包工具）

方案3：使用浏览器原生Import Maps（需注意兼容性）