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

Facing the same issue when upgraded to the latest version of framer motion. It may be a bug related to release. Solved it by downgrading the framer-motion verion at the moment until next release comes. Just add "framer-motion": "^4.1.17" to you package.json and run npm install. — Waleed Tariq, Oct 30 '21 at 12:55

score 29 · Accepted Answer · edited Dec 29 '21 at 12:47

29

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.

edited Dec 29 '21 at 12:47

Tomerikoo

18,379
16
47
61

answered Nov 12 '21 at 13:28

Dinuka Dilshan

552
6
12

score 20 · Answer 2 · edited Dec 29 '21 at 12:45

20

This worked for me:

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

edited Dec 29 '21 at 12:45

Tomerikoo

18,379
16
47
61

answered Dec 17 '21 at 01:53

Soyas

229
1
8

score 13 · Answer 3 · answered Nov 01 '21 at 16:16

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

louielyl · Answer 4 · 2022-06-29T09:11:50.633

6

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.

edited Jun 29 '22 at 09:11

answered Mar 13 '22 at 15:19

louielyl

745
7
9

1

this is the correct answer for TypeScript as of 2022 – Ivan Sanz Carasa Mar 24 '22 at 20:04
1

Alternatively, you could just add a webpack resolution. – Fernando Rojo May 23 '22 at 16:10

score 6 · Answer 5 · answered May 07 '22 at 04:20

I ran into a similar issue with Storybook. I found a clue by researching a similar error in a Gatsby app:

I was able to fix this by adding gatsby-node.js at the root of my project and the following rule on the webpack:
exports.onCreateWebpackConfig = ({ actions }) => {
  actions.setWebpackConfig({
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: 'javascript/auto',
        },
      ],
    },
  })
}

Storybook uses a slightly different format for its configuration, so I had to add this to .storybook/main.js:

module.exports = {
  ...

  webpackFinal: async (config, { configType }) => {
    // Resolve error when webpack-ing storybook:
    // Can't import the named export 'Children' from non EcmaScript module (only
    // default export is available)
    config.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    });

    return config;
  }
}

I think you get the idea — add the above rule to webpack config, so that it treats *.mjs files correctly

Thanks a bunch! I was having this exact issue with storybook and framer-motion 6.3.15 and your added rule got rid of the error. — Michael Koelewijn, Jun 28 '22 at 08:22

score 3 · Answer 6 · edited Dec 29 '21 at 12:46

3

Solved using this import:

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

edited Dec 29 '21 at 12:46

Tomerikoo

18,379
16
47
61

answered Nov 07 '21 at 16:49

Abdalrahman Daas

41
3

score 3 · Answer 7 · answered Dec 09 '21 at 15:33

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 framer-motion@4.1.17

score 3 · Answer 8 · edited Dec 29 '21 at 12:44

3

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'

edited Dec 29 '21 at 12:44

Dharman

30,962
25
85
135

answered Dec 29 '21 at 12:38

Tomasz Ostroga

119
1
4

1

This is basically mentioned already in [this answer](https://stackoverflow.com/a/70387589/6045800) from about 2 weeks ago – Tomerikoo Dec 29 '21 at 12:46

score 2 · Answer 9 · edited Dec 22 '21 at 13:38

2

This works for me.

npm uninstall framer-motion
npm install framer-motion@4.1.17

edited Dec 22 '21 at 13:38

Mohammed Julfikar Ali Mahbub

952
2
11
34

answered Dec 15 '21 at 08:41

Kashif Ali

187
2
9

I think downgrading should not be suggested as fixing import will fix this. – Manasvi Sareen Jan 09 '22 at 04:37

score 1 · Answer 10 · answered May 16 '22 at 10:48

1

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

importing like this solved it for me

answered May 16 '22 at 10:48

vedanth bora

634
4
7

score 1 · Answer 11 · answered Sep 03 '22 at 11:10

I have faced the similar issue while working on latest version of framer motion. I have upgraded my react react-scripts to the latest version and it works for me.

Here is my dependencies.

"dependencies": {
    "framer-motion": "^7.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
},

1.Remove node_modules

   rm -rf node_modules

2.Install latest

npm install react react-dom react-scripts framer-motion

or

yarn install react react-dom react-scripts framer-motion

3. import framer motion

import { motion } from "framer-motion";

score 0 · Answer 12 · answered May 23 '22 at 23:25

A little bit of confusion with the different solutions presented here. I have read this thread from top to bottom and there isn't a well-defined ultimate solution to this issue. It is either downgrading the version of the framer motion or a change in the import declaration. I had to downgrade initially but was concerned about updated features in higher versions. Then, I considered the import declaration solution. However, I had to review what started the issue for me in the first place. I was trying to use React-scroll though I had already begun using framer motion. After installing React-scroll, the configurations probably became disoriented. That was the point I began searching for solutions. So I had to make a choice since they've decided not to work together - discarded React-scroll to continue with Framer motion. That solved the issue for me.

This does not really answer the question. If you have a different question, you can ask it by clicking [Ask Question](https://stackoverflow.com/questions/ask). To get notified when this question gets new answers, you can [follow this question](https://meta.stackexchange.com/q/345661). Once you have enough [reputation](https://stackoverflow.com/help/whats-reputation), you can also [add a bounty](https://stackoverflow.com/help/privileges/set-bounties) to draw more attention to this question. - [From Review](/review/late-answers/31847568) — leepowers, May 27 '22 at 22:50

score 0 · Answer 13 · answered Aug 16 '22 at 19:01

If you are using Create React App (CRA) and want to use Framer on the latest version (as I am writing version 7.2.0) you can use Craco to not eject.

Install Craco
In a new file called craco.config.js add this line that will call a plugin that we will create:

const { ProvidePlugin } = require("webpack");
const webpackFramerTyperScriptPlugin = require("./craco-plugin-framer-typescript");
module.exports = {
  webpack: {
    plugins: [
      new ProvidePlugin({
        React: "react",
      }),
    ],
  },
  plugins: [{ plugin: webpackFramerTyperScriptPlugin }],
};

Create the plugin in a file named craco-plugin-framer-typescript.js

const { loaderByName, addBeforeLoader } = require("@craco/craco");
module.exports = {
  overrideWebpackConfig: ({ webpackConfig, cracoConfig, pluginOptions, context: { env, paths } }) => {
    const ruleToAdd = {
      test: /\.mjs$/,
      include: /node_modules/,
      type: "javascript/auto",
    };
    addBeforeLoader(webpackConfig, loaderByName("file-loader"), ruleToAdd);
    return webpackConfig;
  },
};

Hopefully it can help someone else that want to use CRA + TypeScript + Latest version of Framer.

score 0 · Answer 14 · answered Nov 14 '22 at 03:20

Check what version of react-scripts you have if react scripts are up-to-date then this wont help you . run npm uninstall react-scripts. I had to manually add them in package.json"react-scripts": "^5.0.1", check what is the latest version go to https://www.npmjs.com/package/react-scripts then type it in the package.json run npm i or install that should work. here is my dependencies list for reference.

"framer-motion": "^7.6.6",
"node-sass": "^8.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "^5.0.1",
"react-icons": "^4.6.0",
"react-tooltip": "^4.5.0",
"web-vitals": "^3.0.4"

score 0 · Answer 15 · answered Nov 14 '22 at 03:34

I faced the similar Issue as here. I didn't downgrade the framer motion since I need new features.so I have done,

change import statement,

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

and Have to change react script version to latest,

"dependencies": {
    "framer-motion": "^7.2.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "^5.0.1",
}

score 0 · Answer 16 · answered May 17 '23 at 07:37

0

React 18: This works for me to downgrade from version 10 to 6

npm uninstall framer-motion
npm install framer-motion@6.3.15

answered May 17 '23 at 07:37

starterProgrammer

109
1
11

N H · Answer 17 · 2023-07-02T14:08:58.617

0

you need to download typescript to call the module:

npm install typescript

edited Jul 02 '23 at 14:08

answered Jul 02 '23 at 14:07

N H

1
1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 04 '23 at 10:04

score 0 · Answer 18 · answered Jul 12 '23 at 11:50

0

For those still experiencing the issue. check your react-script version... Version 5 started to work here.

answered Jul 12 '23 at 11:50

Umar Bunu

11
1

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

18 Answers18

Linked