[BUG] 5.0 Failed to compile with create-react-app #1307

semihraifgurel · 2021-10-27T20:37:06Z

Failed to compile.

./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)

The text was updated successfully, but these errors were encountered:

loganpowell · 2021-10-28T00:15:35Z

Got the same exact problem here! I think it's the .mjs extension (unsupported by typescript with CRA)

mattgperry · 2021-10-28T06:14:09Z

https://www.framer.com/docs/guide-upgrade/#%23esm-and-create-react-app
facebook/create-react-app#10356

We are looking at a fix but it might be in CRA. Let’s track it in this ticket

Kripu77 · 2021-10-28T06:20:54Z

Having same issue

yozi-developer · 2021-10-28T08:29:21Z

I was able to fix it by patching CRA
formatjs/formatjs#1395 (comment)

jwfwessels · 2021-10-28T11:43:52Z

After testing a bit it seems that the issue is with how CRA handles ESM dependencies and more particularly transitive dependencies are not handled correctly it seems. There is also an outstanding issue with CRA about this facebook/create-react-app#10356.

Options:

This is 'fixed'/doesn't break in the next version of CRA which you can try today (Create React App 5 Alpha facebook/create-react-app#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

AndreaEsposit · 2021-10-28T11:58:55Z

So as of now, the only solution to even be able to use framer-motion is to temper with CRA(if you are using CRA)?. Thant's a bummer, means that I can't use this library.

loganpowell · 2021-10-28T13:20:18Z

Thank you guys for looking into this! @jwfwessels have you tried CRA5?

mattgperry · 2021-10-28T14:18:49Z

@AndreaEsposit You can still use 4.1.17, you just won't get the drag-to-reorder components.

yozi-developer · 2021-10-28T17:19:46Z

BTW: the issue exists with Storybook@6.3.12 too, can be overcome using webpackFinal and #1307 (comment)

Wa-lead · 2021-10-29T00:23:43Z

Having the same issue here.

justrealmilk · 2021-10-29T08:44:48Z

Tried to configure a work around using CRACO and failed soooo back to 4.*

dcakmak · 2021-10-29T20:25:11Z

my setup as asked, was just a fresh project setup:
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"framer-motion": "^5.0.0"
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"styled-components": "^5.3.3",
"web-vitals": "^1.1.2"

jafin · 2021-11-01T02:37:51Z

@justrealmilk I added the following to craco.config.js and it appears to work.

module.exports = {
  webpack: {
        configure: {
            module: {
                rules: [
                    {
                        type: 'javascript/auto',
                        test: /\.mjs$/,
                        include: /node_modules/,
                    },
                ],
            },
        },
    },
}

frabcus · 2021-11-01T17:40:53Z

I get the same error using this via Next.js

kpjob555 · 2021-11-02T06:51:54Z

I also have this same issue

yadprab · 2021-11-02T11:41:28Z

me too facing the same

titan3755 · 2021-11-04T06:28:04Z

same problem. Is there no way to fix it without downgrading framer-motion?

justrealmilk · 2021-11-04T08:50:53Z

@justrealmilk I added the following to craco.config.js and it appears to work.

module.exports = {

  webpack: {

        configure: {

            module: {

                rules: [

                    {

                        type: 'javascript/auto',

                        test: /\.mjs$/,

                        include: /node_modules/,

                    },

                ],

            },

        },

    },

}

Weirdly didn't work for me

Solo-Digital · 2021-11-04T13:59:02Z

@justrealmilk I added the following to craco.config.js and it appears to work.

module.exports = {

  webpack: {

        configure: {

            module: {

                rules: [

                    {

                        type: 'javascript/auto',

                        test: /\.mjs$/,

                        include: /node_modules/,

                    },

                ],

            },

        },

    },

}

Weirdly didn't work for me

It worked for me

daxaxelrod · 2021-11-04T19:04:54Z

@Solo-Digital Did you already have craco installed?

Solo-Digital · 2021-11-05T06:27:51Z

@Solo-Digital Did you already have craco installed?

Yes - Craco version 6.3.0 and Framer Motion 5.2.0

wahidshafique · 2021-11-05T19:36:15Z

I am getting this error when trying to run storybook 6.3.12 and framer 5.2.1

j-borg · 2021-11-09T12:06:35Z

I am getting this error when trying to run storybook 6.3.12 and framer 5.2.1

Same here when running a Storybook build. @jafin 's solution worked for us though. Added the mjs rule to the webpackFinal config in Storybook https://storybook.js.org/docs/react/configure/webpack#extending-storybooks-webpack-config

see framer/motion#1307

…book) (#3168) * chore: run `npx npm-check-updates -u` to update all packages to latest except eslint, since we are still locked to v7 until cra supports it * lint: run lint fix * fix: allow framer-motion v5 to be used with CRA see framer/motion#1307 * fix: type breaking change in msw 0.36.0 see https://github.com/mswjs/msw/releases/tag/v0.36.0 * fix: rhf regression where last ref is focused instead of first need to now only assign first ref in array-like fields such as Rating field with options, or radio fields. * fix(TableFieldStories): type error * fix(Radio): infinite loop/crash on dependent radio input this was introduced in 7.14 or earlier (did not go back further to check). Suspect infinite validation loop. no clue on why it happens, just that it happens, unfortunately. However, seems to be fixed by adding dependent validation, a new feature in 7.14. * feat(Checkbox): use dependent field validation introduced in rhf7.14 * fix(PublicFormPageStory): add chromatic.pauseAnimationAtEnd prop prevent animation from hiding start page title

itjustbong · 2021-12-15T02:38:59Z

i have same issue with my CRA and i got solution from
link

mattgperry · 2021-12-15T05:12:32Z

I believe this will fix CRA https://github.com/facebook/create-react-app/releases/tag/v5.0.0

semihraifgurel · 2021-12-15T06:39:41Z

Working with CRA 5

bkiac · 2022-01-25T20:51:16Z

I still have this issue with @chakra-ui/react@1.7.3, framer-motion@5.6.0, storybook-react@6.4.14 and @chakra-ui/storybook-addon@1.0.1

sgarcia-dev · 2022-02-03T23:09:48Z

Having this issue on a Webpack v4.43.x (no CRA) install, none of the fixes appear to work besides downgrading to v4.1.x . Perhaps we shouldn't close this issue until a new version of framer-motion arrives which solves this issue without requiring patches/updates to other tooling?

bluekingnfx · 2022-02-20T19:18:03Z

Update your react scripts, npm install react-scripts@latest

https://github.com/framer/motion/blob/main/CHANGELOG.md what's broken looks like it might be framer/motion#1307

sgarcia-dev · 2022-03-03T17:58:00Z

We aren't using react-scripts @bluekingnfx

isc30 · 2022-03-05T19:39:07Z

this fixes it:

    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
    webpackConfig.resolve.extensions.push('.mjs')

# ****#8.0 Introduction**** ## 개요 - 이번 섹션에서는 Framer Motion을 써서 애니메이션을 만드는 법에 대해 학습한다. ## Framer Motion [Production-Ready Animation Library for React | Framer Motion](https://www.framer.com/motion/) - `ReactJS` 용 라이브러리 - 애니메이션을 쉽게 만들 수 있다. - Pose 라는 라이브러리에서 시작됐다. - [Framer](https://www.framer.com/)는 디자이너를 위해 프로토타입을 만들어주는 회사이다. - Framer Motion 라이브러리는 Framer에서 만들었다. # ****#8.1 Installation**** ## 목표 - 프로젝트에 Framer Motion 을 설치해본다. - Framer Motion 을 사용해서 애니메이션을 만들어 본다. ## 사용법 [Introduction | Framer for Developers](https://www.framer.com/docs/introduction/#quick-start) 1. `npm install framer-motion` 설치 - create-react-app Version 4 이하에서는 에러가 발생 할 것이다. → [Ecma Script Module 을 허용해야 한다.](https://www.notion.so/08-ANIMATIONS-d7c84838163c42e9980adba335f04f14) - create-react-app Version 5에서는 Ecma Script Module를 허용하기 때문에 해당 에러가 발생하지 않는다. 2. `import { motion } from "framer-motion"` 불러오기 3. `[<motion.div />` 컴포넌트](https://www.framer.com/docs/introduction/##the-motion-component) - Framer Motion 을 사용하기 위해서 일반 HTML Element를 사용 할 수는 없다. → Framer Motion이 제공하는 `motion` 패키지를 통해서 컴포넌트를 생성 한다. ### `[craco](https://github.com/dilanx/craco)` - create-react-app 의 설정사항을 **O**verride(무시) 해주는 라이브러리 - 사용법 1. `npm i -D @craco/craco` 설치 2. `craco.config.js` 파일 생성 - `package.json` 과 같은 단계에 위치 3. 해당 파일 설정이 필요한 곳에서 제공하는 문서를 따라서 `craco.config.js` 작성 - 예 : [framer/motion#1307 (comment) 4. `package.json` 의 script 명령어 수정 ```json "scripts": { ~~- "start": "react-scripts start"~~ **+ "start": "craco start"** ~~- "build": "react-scripts build"~~ **+ "build": "craco build"** ~~- "test": "react-scripts test"~~ **+ "test": "craco test"** } ```

channyeintun · 2023-01-18T12:25:20Z

this fixes it:

    webpackConfig.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
    })
    webpackConfig.resolve.extensions.push('.mjs')

Thanks. This solves my problem in nextjs project.

thesmashten · 2024-01-17T03:31:29Z

Lol I broke my entire project trying to add framer-motion. My advice: don't bother. Get good at CSS animations, the clowns at framer motion have no clue what they're doing and their stuff only works in their perfect little sandbox display online.

isc30 · 2024-01-17T11:11:08Z

@thesmashten framer-motion is an awesome project and follows the latest standards in ESM. If you can't get it to run, look at yourself

semihraifgurel added the bug Something isn't working label Oct 27, 2021

mattgperry mentioned this issue Oct 28, 2021

/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) #1309

Closed

mattgperry changed the title ~~[BUG] Version 5.0.0 Failed to compile~~ [BUG] 5.0 Failed to compile with create-react-app Oct 28, 2021

mattgperry mentioned this issue Oct 29, 2021

[BUG] Compiler error after fresh project setup #1316

Closed

mattgperry mentioned this issue Nov 1, 2021

Popmotion: React import { animate } from "popmotion"; fails Popmotion/popmotion#923

Closed

bakseter mentioned this issue Nov 4, 2021

⬆️ Update nextjs monorepo to v12.0.2 echo-webkom/echo-web-frontend#706

Closed

1 task

mryechkin mentioned this issue Nov 9, 2021

[BUG] Can't import the named export 'Children' from non EcmaScript module #1340

Closed

karrui added a commit to opengovsg/FormSG that referenced this issue Dec 10, 2021

fix: allow framer-motion v5 to be used with CRA

2cce899

see framer/motion#1307

semihraifgurel closed this as completed Dec 15, 2021

designbyadrian mentioned this issue Dec 17, 2021

Can't import the named export 'Children' from non EcmaScript module doczjs/docz#1686

Open

baumandm mentioned this issue Jan 12, 2022

fix(deps): bump framer-motion from 4.1.17 to 5.6.0 ExpediaGroup/insights-explorer#327

Closed

bkiac mentioned this issue Jan 25, 2022

Storybook doesn't work with Chakra-UI chakra-ui/chakra-ui#5450

Closed

3 tasks

nihgwu mentioned this issue Feb 9, 2022

chore(live-code): replace with react-runner facebook/docusaurus#6589

Closed

dimitropoulos added a commit to dimitropoulos/insomnia that referenced this issue Feb 24, 2022

[broken] upgrades framer-motion to support react 17

7dea97d

https://github.com/framer/motion/blob/main/CHANGELOG.md what's broken looks like it might be framer/motion#1307

dimitropoulos mentioned this issue Feb 25, 2022

chore(deps): upgrade to react 17 Kong/insomnia#4521

Merged

dimitropoulos added a commit to dimitropoulos/insomnia that referenced this issue Feb 28, 2022

[broken] upgrades framer-motion to support react 17

cbe04ce

https://github.com/framer/motion/blob/main/CHANGELOG.md what's broken looks like it might be framer/motion#1307

dimitropoulos added a commit to dimitropoulos/insomnia that referenced this issue Mar 3, 2022

[broken] upgrades framer-motion to support react 17

28dfbef

https://github.com/framer/motion/blob/main/CHANGELOG.md what's broken looks like it might be framer/motion#1307

milesj mentioned this issue Mar 24, 2022

[BUG] ES builds should not be using .mjs extension #1492

Closed

gustaveen mentioned this issue May 3, 2022

Feat / Refactor perils and add tab navigation HedvigInsurance/market-web#659

Merged

thebuilder mentioned this issue Jun 15, 2022

Can't import the named export 'Component' from non EcmaScript module (only default export is available) thebuilder/react-intersection-observer#560

Closed

clementroche mentioned this issue Dec 17, 2022

v 0.2.26 : 'TinyEmitter' exporting problem with create-react-app darkroomengineering/lenis#76

Closed

asmyshlyaev177 mentioned this issue Apr 13, 2023

Can't import the named export 'ScrollMenu' asmyshlyaev177/react-horizontal-scrolling-menu#234

Closed

Moshyfawn mentioned this issue May 31, 2023

issue: Can't import the named export 'Fragment' from non EcmaScript module (only default export is available) react-hook-form/react-hook-form#10465

Closed

1 task

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[BUG] 5.0 Failed to compile with create-react-app #1307

[BUG] 5.0 Failed to compile with create-react-app #1307

semihraifgurel commented Oct 27, 2021

loganpowell commented Oct 28, 2021

mattgperry commented Oct 28, 2021 •

edited

Loading

Kripu77 commented Oct 28, 2021

yozi-developer commented Oct 28, 2021

jwfwessels commented Oct 28, 2021

AndreaEsposit commented Oct 28, 2021 •

edited

Loading

loganpowell commented Oct 28, 2021

mattgperry commented Oct 28, 2021

yozi-developer commented Oct 28, 2021 •

edited

Loading

Wa-lead commented Oct 29, 2021

justrealmilk commented Oct 29, 2021

dcakmak commented Oct 29, 2021

jafin commented Nov 1, 2021

frabcus commented Nov 1, 2021

kpjob555 commented Nov 2, 2021

yadprab commented Nov 2, 2021

titan3755 commented Nov 4, 2021

justrealmilk commented Nov 4, 2021

Solo-Digital commented Nov 4, 2021

daxaxelrod commented Nov 4, 2021

Solo-Digital commented Nov 5, 2021

wahidshafique commented Nov 5, 2021

j-borg commented Nov 9, 2021 •

edited

Loading

itjustbong commented Dec 15, 2021

mattgperry commented Dec 15, 2021

semihraifgurel commented Dec 15, 2021

bkiac commented Jan 25, 2022

sgarcia-dev commented Feb 3, 2022

bluekingnfx commented Feb 20, 2022

sgarcia-dev commented Mar 3, 2022

isc30 commented Mar 5, 2022 •

edited

Loading

channyeintun commented Jan 18, 2023

thesmashten commented Jan 17, 2024

isc30 commented Jan 17, 2024

[BUG] 5.0 Failed to compile with create-react-app #1307

[BUG] 5.0 Failed to compile with create-react-app #1307

Comments

semihraifgurel commented Oct 27, 2021

loganpowell commented Oct 28, 2021

mattgperry commented Oct 28, 2021 • edited Loading

Kripu77 commented Oct 28, 2021

yozi-developer commented Oct 28, 2021

jwfwessels commented Oct 28, 2021

AndreaEsposit commented Oct 28, 2021 • edited Loading

loganpowell commented Oct 28, 2021

mattgperry commented Oct 28, 2021

yozi-developer commented Oct 28, 2021 • edited Loading

Wa-lead commented Oct 29, 2021

justrealmilk commented Oct 29, 2021

dcakmak commented Oct 29, 2021

jafin commented Nov 1, 2021

frabcus commented Nov 1, 2021

kpjob555 commented Nov 2, 2021

yadprab commented Nov 2, 2021

titan3755 commented Nov 4, 2021

justrealmilk commented Nov 4, 2021

Solo-Digital commented Nov 4, 2021

daxaxelrod commented Nov 4, 2021

Solo-Digital commented Nov 5, 2021

wahidshafique commented Nov 5, 2021

j-borg commented Nov 9, 2021 • edited Loading

itjustbong commented Dec 15, 2021

mattgperry commented Dec 15, 2021

semihraifgurel commented Dec 15, 2021

bkiac commented Jan 25, 2022

sgarcia-dev commented Feb 3, 2022

bluekingnfx commented Feb 20, 2022

sgarcia-dev commented Mar 3, 2022

isc30 commented Mar 5, 2022 • edited Loading

channyeintun commented Jan 18, 2023

thesmashten commented Jan 17, 2024

isc30 commented Jan 17, 2024

mattgperry commented Oct 28, 2021 •

edited

Loading

AndreaEsposit commented Oct 28, 2021 •

edited

Loading

yozi-developer commented Oct 28, 2021 •

edited

Loading

j-borg commented Nov 9, 2021 •

edited

Loading

isc30 commented Mar 5, 2022 •

edited

Loading