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

[Doughp]

1. Read the FAQs 👇

2. Describe the bug
./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)

Give a clear and concise description of what the bug is.

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

A CodeSandbox minimal reproduction will allow us to quickly follow the reproduction steps. Without one, this bug report won't be accepted.

4. Steps to reproduce
Run npm install framer-motion
import { motion } from "framer-motion"
run npm start
Steps to reproduce the behavior:

1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See error

5. Expected behavior

A clear and concise description of what you expected to happen.

6. Video or screenshots

If applicable, add a video or screenshots to help explain the bug.

7. Environment details

If applicable, let us know which OS, browser, browser version etc you're using.

FAQs

Type error with AnimateSharedLayout

AnimateSharedLayout was deprecated in 5.0. Refer to the upgrade guide for instructions on how to remove.

Preact isn't working

Framer Motion isn't compatible with Preact.

AnimatePresence isn't working

Have all of its immediate children got a unique key prop that remains the same for that component every render?

// Bad: The index could be given to a different component if the order of items changes
<AnimatePresence>
  {items.map((item, index) => <Component key={index} />)}
</AnimatePresence>

// Good: The item ID is unique to each component
<AnimatePresence>
  {items.map((item, index) => <Component key={item.id} />)}
</AnimatePresence>

Is the AnimatePresence correctly outside of the controlling conditional? AnimatePresence must be rendered whenever you expect an exit animation to run - it can't do so if it's unmounted!

// Bad: AnimatePresence is unmounted - exit animations won't run
{isVisible && (
  <AnimatePresence>
    <Component />
  </AnimatePresence>
)}

// Good: Only the children are unmounted - exit animations will run
<AnimatePresence>
  {isVisible && <Component />}
</AnimatePresence>

[Doughp]

Fixed this by changing import to " import {AnimatePresence, motion} from "framer-motion/dist/framer-motion"; "

[destefanis]

Thanks for posting this fix! This was completely breaking my ability to upgrade to 6.3.0

[richard-lopes-ifood]

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

That Children refers to the module exported by react. Could it be related to how create-react-app builds the app?

[mortoni]

When I use framer-motion/dist/framer-motion I get typescript errors ...

[Vasu-Garg-Noovosoft]

While using framer-motion/dist/framer-motion I am getting TS error: Could not find a declaration file for module 'framer-motion/dist/framer-motion'. and when I try to install types by npm install @types/framer-motion getting this -> npm ERR! 404 Not Found - GET https://registry.npmjs.org/@types%2fframer-motion - Not found

[bbovenzi]

I was having this issue (and the typescript issue with using the dist file) in webpack v4, but upgrading webpack to v5 fixed everything.

[yerraez]

When I used -> "import {AnimatePresence, motion} from "framer-motion/dist/framer-motion" .... I solved the problem of Animate, but I got other errors with Reat import, I fixed it putting -> "import React from 'react'" in all the components jsx files

[richard-lopes-ifood]

I solved the problem of Animate, but I got other errors with Reat import, I fixed it putting -> "import React from 'react'" in all the components jsx files

@yerraez How did you solve the first problem?

[yerraez]

I solved the problem of Animate, but I got other errors with Reat import, I fixed it putting -> "import React from 'react'" in all the components jsx files

@yerraez How did you solve the first problem?

I had this error "./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)"

to solve this error I replace this "import {motion, AnimatePresence} from 'framer-motion'" for this "import {AnimatePresence, motion} from "framer-motion/dist/framer-motion""

[fabdul88]

I initially had this issue and it was fixed using the solution provided in this thread using:

import {AnimatePresence} from "framer-motion/dist/framer-motion";

my app is a create-react-app

Another solution that worked for me

I stumbled across another solution that worked for me, that doesn't require you to add /dist/framer-motion to the end of your import. This is when I updated react-scripts from 4.0.0 to 5.0.1 for improved compatibility with React 18.

Refer to this changelog on how to update react-scripts https://github.com/facebook/create-react-app/blob/main/CHANGELOG.md

part of my package.json before:

dependencies:{
    "framer-motion": "^6.4.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
}

part of my package.json after updating react-scripts:

dependencies:{
    "framer-motion": "^6.4.1",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "5.0.1",
}

After updating react-scripts, I deleted node_modules and package-lock.json. After that, npm i to install all dependencies again.

I then got this error:

ERROR in ./src/Components/ComponentName/Component.jsx 11:0-89

Module not found: Error: Package path ./dist/framer-motion is not exported from package /Users/username/projectpath/projectname/node_modules/framer-motion (see exports field in /Users/username/projectpath/projectname/node_modules/framer-motion/package.json)

This is where I removed /dist/framer-motion from the end of the import, and it worked for me.

[AugustoDiaz-Dev]

./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)

I am getting that error and also some problems with the import of React.

I finished a project, made a copy and ran npm install to get it working.

[JANDA-Developers]

#1525 (comment)
Please fix this i need typescript support.