Error importing Framer Motion v5 in React (with create-react-app)

Question

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)```

Answer 1

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.

Answer 2

This worked for me:

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

Answer 3

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:

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

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

Answer 4

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:

• Create a declaration file in src, e.g. framer-motion.d.ts.
• Add the following code inside the declaration file that you just created.

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

• Change the path "framer-motion/dist/framer-motion" to the path you are importing in your APP.
• Save the .d.ts file and the type should not be bothering you anymore.

Answer 5

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]

Answer 6

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'

Answer 7

Solved using this import:

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