[Solved] Can’t import the named export ‘Children’ from non EcmaScript module (only default export is available)

Hello Guys, How are you all? Hope You all Are Fine. Today I am trying to use simple animation with framer-motion in my reactjs But I am facing following error Can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) in react. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How Can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) Error Occurs ?

I am trying to use simple animation with framer-motion in my reactjs But I am facing following error.

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

How To Solve Can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) Error ?

Solution 1: Downgrade Framer motion

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

Solution 2: Use like this

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

Solution 3: Import in this way

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

Solution 4: Reinstall framer-motion

First of all uninstall framer-motion.

npm uninstall framer-motion

Then Install framer-motion@4.1.17

npm install framer-motion@4.1.17

Now, your error must be solved.

Summary

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also, Read

• Error: Cannot find module ‘my-web/node_modules/coa/compile.js’