Fix the Error “can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) in react”

JavaScript is a core of the programming world that has become an integral part of it. Programmers and developers all over the world have been using it for creating interactive websites and applications to entice users. Websites are incomplete without JavaScript programs added to them, and that’s the reason programmers with great JavaScript skills are working on amazing projects that can create a huge impact. JavaScript has many libraries that are ideally created to make coding simpler for programmers. React.js is a JavaScript library that is used to build user interface components. This UI library is quite popular among programmers as it is really easy to use. When you are working with react, you may get the error warning “can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) in react”.

We are here to help you solve this error efficiently and simply. No matter how tough the error seems, you don’t need to worry. Let’s figure out how you get the error warning

How do you get the error?

When you are using react to try out simple animation along with framer motion, you land up in the error. This is what the error looks like:

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

How To Solve the Error “can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) in react”

We come up with the best ways to help you resolve the error. Check out the options you can try

Solution 1 – Downgrade the version of the framer motion

Sometimes the error shows up because the version you have is not supporting the function. In order to fix the error warning, you just need to downgrade the framer motion version to 4.1.17. you should switch to this version in the package.json file and then execute the npm install. It can simply fix the error.

Solution 2 – Way to import

Another way to fix the error is to import the correct way. Use the following command

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

Solution 3 – Use this command

To solve the error, you need to follow the below command

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

Solution 4 – Reinstall the framer-motion

To fix the error, sometimes reinstallation is one of the effective solutions. In order to do that, you need to uninstall your framer-motion. Use the below command

npm uninstall framer-motion

The next step is to install the framer-motion with version 4.1.17. Use the following command

npm install [email protected]

It resolves the error warning.

Solution 5 – Command to run

You can follow the below command directly to resolve the error

react-shade/dist/index.js

Conclusion

We shed light on the solution to fix the error warning “can’t import the named export ‘Children’ from non EcmaScript module (only default export is available) in react”.  

I hope you find it helpful!