项目中途安装导入Framer Motion出现'Children'命名导出报错如何解决

报错原因 #

该报错是由于现有项目的构建配置版本较低，不兼容Framer Motion v6及更高版本的ESM模块导出规则。新版create-react-app生成的项目默认使用支持ESM导入的react-scripts v5+版本，因此新建项目安装Framer Motion不会触发该问题。

• 方案1：降级Framer Motion到v5兼容版本（无需修改项目配置，生效最快）
  执行对应包管理工具的安装命令即可：

  # npm
  npm install framer-motion@5.6.0
  # yarn
  yarn add framer-motion@5.6.0
  # pnpm
  pnpm add framer-motion@5.6.0
  

• 方案2：升级react-scripts到5.0.0及以上版本
  若需要使用最新版Framer Motion的特性，可升级项目的react-scripts依赖：

  npm install react-scripts@latest
  

  升级完成后删除项目根目录的node_modules文件夹以及依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令即可。
• 方案3：修改webpack配置（仅适用于eject或自定义webpack配置的项目）
  若项目未使用react-scripts托管构建配置，可在webpack配置的module.rules数组中添加如下规则，适配ESM模块识别：

  {
    test: /\.mjs$/,
    include: /node_modules/,
    type: "javascript/auto"
  }
  

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