Cuando estoy tratando de hacer una animación simple para div usando el movimiento del marco. Recibo este siguiente error en el navegador
/node_modules/framer-motion/dist/es/components/AnimatePresence/index.mjs
Can't import the named export 'Children' from non EcmaScript module (only default export is available)```Bajé la versión de movimiento de Framer a "4.1.17" cambiando el archivo package.json y ejecutando npm install y funciona para mí.
Aquí está la respuesta al problema de Framer Discord
con respecto al problema con la versión actual de create-react-app (CRA), el problema se rastrea en GitHub aquí: https://github.com/formatjs/formatjs/issues/1395
Después de probar un poco, parece que el problema es cómo CRA maneja las dependencias de ESM y, más particularmente, parece que las dependencias transitivas no se manejan correctamente. También hay un problema pendiente con CRA sobre esto https://github.com/facebook/create-react-app/issues/10356 .
Opciones:
Esto está arreglado/no se rompe en la próxima versión de CRA que puede probar hoy ( https://github.com/facebook/create-react-app/discussions/11278 ) tome nota aunque todavía está en alfa.
Puede parchear CRA para solucionar el problema como se describe en varios boletos de otras bibliotecas
Esto funcionó para mí:
import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'