React中未使用Webpack，导入framer-motion模块时出现「无法从非ECMAScript模块导入命名导出Children」错误的求助

问题分析 #

这个报错本质是模块格式不兼容导致的——你的项目使用ES模块（ESM）规范，但当前安装的framer-motion版本提供的模块可能以CommonJS（CJS）格式为主，或者在非Webpack环境下（比如Vite）模块解析逻辑出现了冲突，导致无法正确识别命名导出。

具体解决方案 #

1. 调整framer-motion版本 #

优先尝试安装一个已知兼容非Webpack环境的稳定版本，比如10.x系列（经测试在Vite等工具下兼容性较好）：

# 先卸载当前版本
npm uninstall framer-motion
# 安装指定兼容版本
npm install framer-motion@10.16.4
# 或者直接安装最新稳定版
npm install framer-motion@latest

2. 临时绕过命名导入限制 #

如果版本调整无效，可以改用默认导入后解构的方式，绕开命名导出的解析问题：

// 替换原有的命名导入代码
import framerMotion from "framer-motion";
const { motion } = framerMotion;

3. 针对Vite环境的配置优化 #

如果你用的是Vite（非Webpack环境最常见的工具），可以在vite.config.js中强制让Vite把framer-motion按ES模块处理：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  optimizeDeps: {
    include: ['framer-motion'],
    esbuildOptions: {
      loader: {
        '.js': 'jsx',
      },
    },
  },
});

修改后重启开发服务器，让配置生效。

4. 确认React版本兼容性 #

framer-motion 10+要求React 16.8及以上版本（需支持hooks），如果你的React版本过低，也可能引发模块解析异常：

npm install react@latest react-dom@latest

验证方法 #

修改完成后重新启动项目，若报错消失且motion组件能正常渲染，说明问题已解决。如果仍有异常，可以检查package.json中是否存在"type": "module"字段——如果没有，尝试添加该字段（会让项目默认以ES模块规范解析文件）。

内容的提问来源于stack exchange，提问作者Cláudio Vitor Dantas