Framer Motion 非 React 项目中的依赖问题解析

问题背景

Framer Motion 是一个流行的动画库，最初为 React 设计，但后来也提供了对非 React 项目的支持。在版本 11.3.0 之后，用户报告了一个重要问题：即使在没有 React 的项目中（如 Vue.js），Framer Motion 也开始强制要求安装 React 依赖。

问题表现

当开发者尝试在非 React 项目中使用 Framer Motion 的 DOM 功能时，会遇到以下错误提示：

Error: Could not resolve "react" imported by "framer-motion". Is it installed?

这个问题在 11.2.14 及以下版本中并不存在，表明这是 11.3.0 版本引入的回归性问题。

技术分析

通过代码追踪，我们发现问题的根源在于依赖链：

1. dom-entry 模块导入 animate
2. animate 导入 animateTarget
3. animateTarget 使用 addValueToWillChange 函数
4. addValueToWillChange 来自 11.3.0 新增的 add-will-change 模块
5. add-will-change 导入 WillChangeMotionValue
6. WillChangeMotionValue 导入 useConstant
7. useConstant 最终从 react 导入 useRef

这个依赖链表明，虽然 React 被标记为可选依赖，但代码实现中却存在硬性依赖。

解决方案

Framer Motion 团队在 11.3.11 版本中修复了这个问题。修复的关键点包括：

1. 重构了 add-will-change 模块的实现
2. 移除了对 React 相关功能的非必要依赖
3. 确保核心动画功能可以在纯 JavaScript 环境中运行

对于使用 Motion 包（非 React 版本）的用户，团队在 12.0.11 版本中也解决了类似问题，通过调整 Rollup 配置确保 React 依赖被正确处理。

开发者建议

1. 对于非 React 项目，建议使用最新版本的 Framer Motion
2. 如果遇到类似依赖问题，可以检查依赖链中是否存在意外的 React 引用
3. 在构建配置中，可以尝试将 React 标记为外部依赖（external）
4. 关注官方更新日志，特别是关于依赖关系的变更说明

总结

这个案例展示了现代前端开发中一个常见挑战：如何在保持功能完整性的同时，确保模块间的依赖关系清晰且合理。Framer Motion 团队通过快速响应和代码重构，成功解决了这个问题，为跨框架动画解决方案提供了更好的支持。