Resuelto usando esta importación:

 import {motion} from 'framer-motion/dist/es/index'

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:

1. 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.

2. Puede parchear CRA para solucionar el problema como se describe en varios boletos de otras bibliotecas

• https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361
• https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022

Para resolver No se puede importar la exportación denominada 'Niños' desde un módulo que no es EcmaScript (solo está disponible la exportación predeterminada) Error Solo necesita degradar la versión de movimiento de Framer a "4.1. 17” Y ahora, su error debe ser resuelto.

https://exerror.com/cant-import-the-named-export-children-from-non-ecmascript-module-only-default-export-is-disponible/

 npm i framer-motion@4.1.17

Esto funciona para mí.

 npm uninstall framer-motion npm install framer-motion@4.1.17

Esto funcionó para mí:

 import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'

En mi opinión, cambiar a una versión anterior es el último recurso porque no puedes usar las características más nuevas que te ofrece Framer Motion.

Lo que debería funcionar en este caso es simplemente cambiar ligeramente la importación:

 import { motion } from 'framer-motion/dist/framer-motion'

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í.

Información adicional:

Para las personas que tienen problemas con Could not find a declaration file for module 'framer-motion/dist/framer-motion'. error después de aplicar las soluciones anteriores, dependiendo de dónde estés importando las funciones, este es el truco para hacer que el tipo funcione:

• Cree un archivo de declaración en src, por ejemplo, framer-motion.d.ts.
• Agregue el siguiente código dentro del archivo de declaración que acaba de crear.

 declare module "framer-motion/dist/framer-motion" { export * from "framer-motion"; }

• Cambie la ruta "framer-motion/dist/framer-motion" a la ruta que está importando en su APLICACIÓN.
• Guarde el archivo .d.ts y el tipo ya no debería molestarlo.