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.

Solved using this import:

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

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

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

This works for me.

npm uninstall framer-motion
npm install 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'

This worked for me:

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