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

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>

About this issue

  • Original URL
  • State: closed
  • Created 2 years ago
  • Reactions: 8
  • Comments: 31

Commits related to this issue

Most upvoted comments

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

+86
Doughp on Apr 26, 2022

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

+36
mortoni on Jun 10, 2022

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.

+27
fabdul88 on Jul 7, 2022

If you can’t upgrade react-scripts to version 5, another workaround that worked for me is from this answer here:

  1. Create a framer-motion-types.d.ts file in your src directory
  2. Add the following code into the file created above:
declare module "framer-motion/dist/framer-motion" {
	export * from "framer-motion";
}
  1. You can now use framer motion with the following import while keeping types working: import { AnimatePresence, motion } from "framer-motion/dist/framer-motion";
+14
michaelignat on Oct 17, 2022

https://github.com/framer/motion/issues/1525#issuecomment-1152007824 Please fix this i need typescript support.

+9
JANDA-Developers on Jul 27, 2022

This is a step-by-step guide to fix the error “Can’t import the named export ‘Children’ from non EcmaScript module (only default export is available)” which should work for most users with latest framer-motion version.

Step 1: Update Dependencies The first step is to update the versions of the following dependencies in your package.json file:

"dependencies": {
    "framer-motion": "^10.0.0",
    "react": "18.0.0",
    "react-dom": "18.0.0",
    "react-scripts": "5.0.1"
},

Again make sure all the versions are the same.

Step 2: Delete node_modules and Lock File After updating the dependencies, delete the node_modules folder and the lock file. You can do this by running the following command in your terminal:

rm -rf node_modules
rm yarn.lock // for yarn users
rm package-lock.json // for npm users

Step 3: Install Dependencies Now run the following command in your terminal to install all the dependencies again:

npm install // for npm users
yarn install // for yarn users

Step 4: Start Server To import framer-motion use:

import {AnimatePresence, motion} from "framer-motion";

After installing the dependencies, start your server and the error should be fixed.

This guide has been tested on a sandbox environment and should work for most users.

+7
BlackHatDevX on Mar 31, 2023

framer-motion/dist/framer-motion

All you have to do is update your packages.json file and delete the node_modules folder and the lock file then run npm install or yarn install to install all the dependencies again OR you can just delete only the files related to framer-motion and remove it from your packages.json file then install framer-motion again.

   //this is how you import from `framer-motion`
   import { AnimatePresence, motion } from "framer-motion" // not "framer-motion/dist/framer-motion"

~ I hope this helped (。_。)

+6
Divuzki on Sep 14, 2022

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.

Updating the react-scripts was the solution to this inner node_modules error. Thanks!

+4
luisFebro on Oct 10, 2022

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.

Thank you @fabdul88 , Changing the react scripts version solved the issue

+3
RadientBrain on Aug 22, 2022

I tried all above solutions, nothing is working for me, i am using it in next js project. image

+2
Naeem775 on Nov 27, 2022

Still experiencing this issue. Any updates?

+2
ronald-cognite on Nov 25, 2022

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

+2
bbovenzi on Jun 16, 2022

I’ve tried a lot of things, but the only thing that has worked so far is my project downgrading to framer-motion ^4.1.13. My project was a created with Codesandbox’s React Template. I can’t imagine downgrading is the optimal solution. Any thoughts on this?

+1
p0cket on Jan 26, 2023

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.

The 2nd solution works for me. Thank you !

+1
Htet-Wai-Yan on Aug 26, 2022
Read more comments on GitHub
← motion: [BUG] AnimatePresence gets stuck when state changes quickly
motion: [BUG] elements are not removed from the DOM after exit animation  →