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

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 5

Solved using this import:

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

Answer 6

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

Answer 7

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 8

This works for me.

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

Answer 9

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

importing like this solved it for me

Answer 10

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

Answer 11

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.