React项目集成framer-motion编译失败，求解决方案

你遇到的编译错误核心是版本不兼容：

• useId和useInsertionEffect是React 18才新增的内置Hook，React 17.0.1完全没有这两个API
• framer-motion 8.0.1已经开始依赖React 18的特性，所以在React 17项目中使用会触发导入错误

有两种可行的修复方式，根据你的项目需求选择：

方案1：升级React到18版本 #

这是长期维护的最佳选择，步骤如下：

1. 安装React 18及配套依赖：

npm install react@^18.2.0 react-dom@^18.2.0

2. 更新项目入口文件（通常是src/index.js）的渲染逻辑，React 18废弃了ReactDOM.render，改用createRoot：

// 原React 17写法
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// 改为React 18写法
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

3. 恢复framer-motion的标准导入路径，不需要引用dist目录：

import { motion, AnimatePresence, AnimateSharedLayout } from "framer-motion";

方案2：降级framer-motion到兼容React 17的版本 #

如果暂时不想升级React，可将framer-motion降级到7.x系列（该版本完全兼容React 17）：

npm install framer-motion@^7.10.3

同样恢复标准导入路径即可，不需要修改React相关代码。

你之前尝试更换framer-motion的导入路径（比如framer-motion/dist/framer-motion）无法解决问题，因为错误根源是framer-motion 8.x的代码本身依赖React 18的API，和导入路径无关。

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