使用framer-motion 9+构建Next应用时出现TypeScript类型错误

错误原因 #

这个报错是因为framer-motion 9.1.7及10.0版本使用了TypeScript 4.7才支持的泛型类型引用语法（typeof Feature<unknown>），如果你的项目TypeScript版本低于4.7，就会无法识别该语法，抛出分号缺失的错误。

修复方案 #

• 升级TypeScript到4.7+
  在项目终端执行：

  # npm
  npm install typescript@^4.7 --save-dev
  # yarn
  yarn add typescript@^4.7 --dev
  

  安装完成后检查package.json中的typescript版本，确认已更新到4.7或更高。

• 降级framer-motion到兼容版本
  若暂时无法升级TypeScript，可降级到9.1.6版本（该版本未使用新语法）：

  # npm
  npm install framer-motion@9.1.6 --save
  # yarn
  yarn add framer-motion@9.1.6
  

• 检查tsconfig配置
  确保tsconfig.json的compilerOptions中没有限制过低的版本：

  {
    "compilerOptions": {
      "target": "ES2020",
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      // 其他配置项...
    }
  }
  

验证修复 #

重新启动Next.js开发服务：

npm run dev
# 或
yarn dev

若错误不再出现，说明修复生效。

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