如何在项目中使用本地版FullCalendar并解决包依赖引用错误

问题根源 #

你的错误源于两个核心问题：

• FullCalendar的本地源码未经过构建，缺少编译后的产物（包括类型文件、可执行JS），直接link源码目录会导致模块解析失败
• Yarn Workspace与npm的依赖解析逻辑不一致，混用两种包管理器引发依赖冲突

分步解决方法 #

1. 先构建FullCalendar本地包 #

FullCalendar采用monorepo结构，所有包必须先编译生成产物才能被外部项目识别。在FullCalendar根目录执行全量构建：

yarn build

若仅需构建你用到的包，可指定包名缩小范围：

yarn build common core interaction premium-common resource-common resource-timeline scrollgrid timeline vue

2. 统一包管理器，避免混用 #

由于FullCalendar仓库使用Yarn管理依赖，推荐你的项目也改用Yarn，用yarn link替代npm link：

• 在FullCalendar根目录批量创建包链接：

  yarn workspaces run link
  

• 在你的项目目录中关联这些包：

  yarn link @fullcalendar/common @fullcalendar/core @fullcalendar/interaction @fullcalendar/premium-common @fullcalendar/resource-common @fullcalendar/resource-timeline @fullcalendar/scrollgrid @fullcalendar/timeline @fullcalendar/vue
  

3. 调整TypeScript配置（若项目使用TS） #

确保项目的tsconfig.json配置了正确的模块解析规则：

{
  "compilerOptions": {
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@fullcalendar/*": ["node_modules/@fullcalendar/*"]
    }
  }
}

完成配置后，清理项目缓存（如Webpack/Vite的node_modules/.cache目录），重启TypeScript服务。

4. 检查依赖完整性 #

确认你link的包包含了所有必要的依赖项，FullCalendar部分包存在内部依赖（如scrollgrid依赖common的工具模块），通过Yarn Workspace批量link可自动处理这类依赖关系。

验证流程 #

1. 重新构建FullCalendar目标包
2. 使用Yarn完成包关联
3. 清理项目缓存与构建产物
4. 重启项目服务

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