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

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.

This worked for me:

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

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

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.

Solved using this import:

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

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

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'

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

This works for me.

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

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

importing like this solved it for me

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";

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.

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.

1. Install Craco
2. 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 }],
};

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