React项目引入framer-motion报错无法从非ES模块导入命名导出Children

该报错的核心原因是项目使用的webpack版本（webpack4及以下）不支持高版本framer-motion导出的ESM格式模块，可通过以下方案解决：

• 方案1：降级framer-motion到v9版本
  该问题多出现在使用react-scripts@4.x及更早版本的Create React App项目中，高版本framer-motion（v10+）不再兼容webpack4的模块解析规则，直接安装v9版本即可解决：

  # npm
  npm install framer-motion@9
  # yarn
  yarn add framer-motion@9
  

• 方案2：升级react-scripts到v5及以上版本
  如果你不想降级framer-motion，可以升级项目的react-scripts版本适配ES模块解析规则：

  # npm
  npm install react-scripts@latest
  # yarn
  yarn add react-scripts@latest
  

  升级前注意排查其他依赖和react-scripts v5的兼容性。
• 方案3：修改webpack配置适配.mjs解析
  如果你是eject过CRA项目，或者使用craco、自定义webpack配置的项目，可以在webpack配置中新增对.mjs文件的解析规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  }
  

• 临时解决方案：指定引入CommonJS版本的framer-motion
  你可以直接引入framer-motion的cjs格式产物临时解决问题，不建议长期使用该方案：

  import { motion } from "framer-motion/dist/framer-motion.cjs.js"
  

内容的提问来源于stack exchange，提问作者O.smith Effizzy's Tech