React（create-react-app搭建）项目导入Framer Motion v5报错如何解决？

• 第一步校验依赖版本匹配关系：Framer Motion v10及以上版本仅适配React 18+，如果你的React版本低于18，安装了v10+的Framer Motion就会触发该导入错误，报错源于新版本Framer Motion内部使用了React 18调整后的Children API导出规则。
• 第二步校验create-react-app（CRA）版本：低于v5的CRA内置webpack版本对.mjs格式的ES模块处理存在缺陷，无法正确解析Framer Motion的ESM格式导出，也会触发该报错。

• 方案1：降级Framer Motion适配低版本React
  若项目暂时无法升级到React 18，直接将Framer Motion降级到v9版本即可解决问题，执行对应包管理器命令：
  npm用户执行：npm install framer-motion@9
  yarn用户执行：yarn add framer-motion@9
• 方案2：升级全套依赖适配高版本
  若可以调整基础依赖版本，先将React、ReactDOM升级到18+，再安装最新版Framer Motion即可：
  执行命令：npm install react@latest react-dom@latest framer-motion@latest
• 方案3：低版本CRA临时适配方案
  若不想升级CRA和React版本，可以修改webpack配置添加对.mjs文件的解析支持。未eject的CRA项目可通过react-app-rewired+customize-cra修改配置，在项目根目录的config-overrides.js中添加如下代码：

  module.exports = function override(config) {
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });
    return config;
  };
  

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