引入framer-motion出现元素类型无效错误，如何解决？

以下是几个针对性的修复步骤，按顺序尝试即可：

• 检查framer-motion版本
  不同版本的导出规则可能存在差异，先通过命令查看当前项目的依赖版本：

  npm list framer-motion
  

  若版本较旧，升级到最新稳定版：

  npm install framer-motion@latest
  

• 确认导入与使用语法正确
  确保始终使用命名导入方式引入motion，且组件调用格式无误：
  正确示例：

  import { motion } from "framer-motion";
  
  function App() {
    return <motion.div animate={{ scale: 1.2 }}>测试内容</motion.div>;
  }
  

  避免误用默认导入（如import motion from "framer-motion"），这会直接导致组件为undefined。

• 清除缓存并重启服务
  开发缓存可能引发模块解析异常，执行对应命令重置缓存后重启服务：

  • Create React App 项目：

    npm start -- --reset-cache
    

  • Next.js/Vite 等框架：手动删除项目内的node_modules/.cache目录，再重启开发服务。

• 重新安装依赖
  若依赖安装存在损坏，删除node_modules、package-lock.json（或yarn.lock）后重新安装：

  rm -rf node_modules package-lock.json
  npm install
  

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