Menu
When am trying to do simple animation for div using framer motion. Am getting this following error in browser
/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)```
218
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.
I downgraded the Framer motion version to "4.1. 17" by changing the package. json file and running npm install and it works for me.
Framer Motion improves upon and simplifies the API in a way that couldn't have been done without breaking changes and rewriting. One difference is that whereas Framer Motion only has support for React, Pose has support for React-Native and Vue.
We built the new Framer library on React Hooks because it is simpler and ensures that beginners won't have to learn about classes, this, etc right off the bat. It's quite elegant really. TLDR; use functions and learn about Hooks if you plan to get more advanced with React.
You don't need framer, you just need framer-motion for React App. Try this sandbox or this The version is "framer-motion": "3.10.6". You installed framer-motion right? Then you will have to import from that lib itself! Yes.Module '"framer-motion"' has no exported member 'Frame'.ts (2305)An error will be displayed.
Framer Motion is an animation library for creating declarative animations in React. It provides production-ready animations and a low-level API to help simplify the process of integrating animations into an application.
Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them. When you’re ready to deploy to production, running npm run build will create an optimized build ...
Just add "framer-motion": "^4.1.17" to you package.json and run npm install. I downgraded the Framer motion version to "4.1.17" by changing the package.json file and running npm install and it works for me. import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'
I downgraded the Framer motion version to "4.1.17" by changing the package.json file and running npm install and it works for me.
185
This worked for me:
import {AnimatePresence, motion} from 'framer-motion/dist/framer-motion'
Here's the response to the issue from the Framer Discord
regarding the issue with the current version of create-react-app (CRA) the issue is being tracked on GitHub here: https://github.com/formatjs/formatjs/issues/1395
After testing a bit it seems that the issue is with how CRA handles ESM dependancies and more particularly transitive dependancies are not handled correctly it seems. There is also an outstanding issue with CRA about this https://github.com/facebook/create-react-app/issues/10356.
Options:
This is fixed/doesn't break in the next version of CRA which you can try today (https://github.com/facebook/create-react-app/discussions/11278) take note though its still in alpha.
You can patch CRA to get around the issue as described in a number of tickets from other libraries
- https://github.com/formatjs/formatjs/issues/1395#issuecomment-518823361
- https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022
33
Additional Information:
For people who are struggling with the Could not find a declaration file for module 'framer-motion/dist/framer-motion'. error after applying the solutions above, depending on where you are importing the functions from, here is the trick to make the type works:
framer-motion.d.ts.
declare module "framer-motion/dist/framer-motion" {
export * from "framer-motion";
}
"framer-motion/dist/framer-motion" to the path you are importing in your APP.
38
To Solve Can't import the named export 'Children' from non EcmaScript module (only default export is available) Error You Just need to Downgrade Framer motion version to “4.1. 17” And Now, Your error must be solved.
https://exerror.com/cant-import-the-named-export-children-from-non-ecmascript-module-only-default-export-is-available/
npm i [email protected]
In my opinion downgrading to older version is a last resort because you can't use newer features framer motion gives you.
What should work in this case is just changing import slightly:
import { motion } from 'framer-motion/dist/framer-motion'
Solved using this import:
import {motion} from 'framer-motion/dist/es/index'
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
