Next.js集成Framer Motion报错：'useState'未从react导出

问题分析 #

报错提示'useState' is not exported from 'react'，核心原因是依赖版本不兼容或依赖/缓存异常，以下是针对性解决步骤：

1. 校验React版本兼容性 #

Framer Motion v10及以上版本要求React 18.x+支持，若你的React版本低于18.x，会触发此类导出错误：

• 查看当前React版本：

  npm list react react-dom
  

• 若版本低于18.x，升级React及对应依赖：

  npm install react@latest react-dom@latest
  

  若你的Next.js版本过旧不兼容React 18，同步升级Next.js：

  npm install next@latest
  

2. 确认组件导入方式 #

确保motion组件和React钩子的导入方式正确：

// 正确示例
import { useState } from "react";
import { motion } from "framer-motion";

export default function MyComponent() {
  const [isVisible, setIsVisible] = useState(true);
  return (
    <motion.div animate={{ opacity: isVisible ? 1 : 0 }}>
      Animated Content
    </motion.div>
  );
}

禁止从framer-motion包中导入React钩子，所有React内置钩子需从react包导入。

3. 清理依赖缓存并重装 #

缓存或损坏的依赖包可能导致异常，执行以下操作：

• 删除依赖目录和锁文件：

  rm -rf node_modules package-lock.json
  

• 重新安装依赖：

  npm install
  

• 重启开发服务器：

  npm run dev
  

4. 检查Next.js自动导入配置 #

若项目禁用了Next.js的React自动导入功能，需手动导入所有用到的React钩子。检查next.config.js中是否存在experimental: { reactRemoveProperties: true }或类似禁用自动导入的配置，若有，确保手动导入useState等所需钩子。

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