[Fixed] Can't import the named export 'Children' from non EcmaScript module (only default export is available)

Problem:

We are trying to use simple animation with framer-motion in reactjs But sometimes we are facing the following error.

Can't import the named export 'Children' from non EcmaScript module (only default export is available)

Solution:

You Just need to Downgrade the Framer motion version to “4.1.17” in your package.json file and then run npm install Now, Your error must be solved.

Use like this:-

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

Import in this way:-

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

Reinstall framer-motion:-

npm uninstall framer-motion

Then Install framer-motion@4.1.17

npm install framer-motion@4.1.17

It’s all About this issue. Hope all solutions helped you a lot. Comment below which solution worked for you?