[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module. PLEASE UPGRADE YOUR CRA VERSION 😿 #775

thib3113 · 2022-06-07T22:46:11Z

Do you want to request a feature or report a bug?

A Bug

What is the current behavior?

v9.0.4 seems to add a breaking change .

My setup works with V9.0.3, but when updating to V9.0.4 react scripts refuse to build

./node_modules/react-toastify/dist/react-toastify.esm.mjs
Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

React 17.0.1
react-scripts 4.0.1 ( with typescript )

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

Robloche · 2022-06-08T06:49:51Z

Exact same issue for me.

fkhadra · 2022-06-08T06:55:13Z

I'm on it

fkhadra · 2022-06-08T07:00:21Z

@Robloche you are using latest CRA?

fkhadra · 2022-06-08T07:06:26Z

@cakonze, @niwa-takeru, @thib3113, just tested with the latest CRA and it works as expected. I suggest you upgrade to the latest CRA. 4.0.1 is almost 2 years old

thib3113 · 2022-06-08T07:18:09Z

@fkhadra not so easy ...

CRA 5 use webpack 5, which remove node js polyfill ; And lot of people can't migrate to it : facebook/create-react-app#11756 .

About my personal case, I'm actually migrating to V5, but it will took a long time (because I need to rewrite/re publish some libraries that use polyfill)

fkhadra · 2022-06-08T07:34:03Z

@thib3113 I want to 😭. The module system in our ecosystem is so messy. If I revert the PR then I would break vitejs and nextjs. I don't see any good solution

I understand your pain, believe me. What I can suggest is to stick to v9.0.3 until you fully migrated to CRA v5.

Edit: I'll update the release note to mention the issue with CRA v4

fkhadra · 2022-06-08T07:36:25Z

I've also found this solution, for those who cannot migrate to v5 reactioncommerce/reaction-component-library#399 (comment)

thib3113 · 2022-06-08T07:45:29Z

@fkhadra thank you, but it's not really a solution with react-scripts . It's a solution to doesn't use it :) . ( but, my case is "pretty" easy, I'm just using an old library, that is preparing a big major update ... and so doesn't update the last one ... I will start by trying to fix it, and do a PR, before switching to another things )

About the change, the main problem for me is maybe the version change ... patch need to doesn't contains breaking changes and only bugfixes . ( but in fact ^9.0.1 will match 9.1.0 too ... ) .

Robloche · 2022-06-08T07:51:09Z

@Robloche you are using latest CRA?

Unfortunately, no. I would like to but I've got troubles with a couple of npm packages that weren't designed to be used in a browser but were supported until CRA 4.

fkhadra · 2022-06-08T08:02:11Z

@thib3113 regarding semver, this is debatable. There are no breaking changes introduced in the library itself. The main issue is that CRA v4 does not support es module.

But as I said, this is debatable, so as a consumer of the package, I understand your point of view as well.

The current JS ecosystem is moving to es modules, there is a lot of friction but, passed that point, I believe that the ecosystem will get better. As a maintainer, we are the driving force of this change.

Anyway, I digress. I'll check with other maintainers about how they handled this change. Sorry for the trouble 🙏

cakonze · 2022-06-08T11:57:58Z

I've also found this solution, for those who cannot migrate to v5 reactioncommerce/reaction-component-library#399 (comment)

This solution works for me! Thanks!

forgowhisky · 2022-06-08T19:01:27Z

also getting this

Joshua-Enrico · 2022-06-09T02:05:20Z

Not the best fix at the moment, but I opted to replace the version I was using with a minor one.
"react-toastify": "^9.0.1" > "react-toastify": "9.0.0",

thib3113 · 2022-06-09T06:16:47Z

@Joshua-Enrico it works with 9.0.3 too . only the 9.0.4 introduce this change

dimitur2204 · 2022-06-09T11:21:52Z

Same here 9.0.3 seems to work fine though.

sumitk-singh · 2022-06-11T20:41:40Z

having the same isuue

fmenes01 · 2022-06-13T17:11:05Z

same problem

mahmoud-ahmed-elqenawey · 2022-06-14T15:48:55Z

having the same isuue

djaffer · 2022-06-16T10:22:47Z

same issue. Thanks @fkhadra for solution.

bluepeter · 2022-06-21T01:14:23Z

Still the same issue in 9.0.5

drethedevjs · 2022-06-24T02:03:31Z

Not the best fix at the moment, but I opted to replace the version I was using with a minor one. "react-toastify": "^9.0.1" > "react-toastify": "9.0.0",

I got this error using 9.0.5. I went down to 9.0.3 and now it works.

Robloche · 2022-07-19T07:17:29Z

Hello,
Can we get an update on this issue, please?
Not a real blocker since we can stick to v9.0.3 but we're slowly drifting away from the latest version...

fkhadra · 2022-07-19T11:58:18Z

Hey @Robloche, I understand your concern but supporting something that's 2 years old + modern bundlers is a lot of work. Can't you upgrade CRA? As a maintainer, we are supposed to drive the changes to the modern module system but we also need your help with that.
If you want to stick with CRA v4 there is this workaround reactioncommerce/reaction-component-library#399 (comment)

Robloche · 2022-07-19T12:54:29Z

Yes, I totally want to upgrade to CRA5 but this leads to other issues (missing polyfills, as you're obviously aware)? So, for now, I'll stick to CRA4 and react-toastify 9.0.3.
And as soon as my workload allows it, I'll upgrade everything.

I just wanted to know if something was in progress regarding this issue, but I truly understand that's not a trivial dev.

Thanks!

djaffer · 2022-07-20T09:22:39Z

It would be nice if it is not a requirement and expectation to upgrade to react CRA 5. This time I can safely say most of the sites have not been upgraded due to the breaking change. I really like this plugin.

ashikibrahim · 2022-07-29T05:45:26Z

i had this error => "Can't import the named export 'cloneElement' from non EcmaScript module"
i had tried many other ways but coudnt find a solution
at last i updated the react-script version 2.0.3 to 5.0.1 and i corrected the issue.

PranoySarker · 2022-08-25T05:53:29Z

My issue is solved by update the react-script and node version.

cristoferrao · 2022-08-25T06:48:03Z

thanks

garvae · 2022-09-22T13:04:43Z

same issue

"react-toastify": "^9.0.8"
"react-scripts": "^4.0.3"
"react": "^18.2.0"
"react-dom": "^18.2.0"

congduong97 · 2022-09-23T08:16:40Z

Not the best fix at the moment, but I opted to replace the version I was using with a minor one. "react-toastify": "^9.0.1" > "react-toastify": "9.0.0",

It work for me, Thanks

John-Yue · 2022-09-29T08:31:57Z

Not the best fix at the moment, but I opted to replace the version I was using with a minor one. "react-toastify": "^9.0.1" > "react-toastify": "9.0.0",

I got this error using 9.0.5. I went down to 9.0.3 and now it works.

Me too!!!

ruymaster · 2022-10-04T16:53:52Z

Also I got this issue.

./node_modules/react-toastify/dist/react-toastify.esm.mjs
Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)

iamrosada · 2022-10-04T18:57:03Z

The some issue
./node_modules/react-toastify/dist/react-toastify.esm.mjs
Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)

cpvalente · 2022-10-14T10:50:51Z

Hi, I am having this issue in a non CRA boilerplate but in a project with just storybook and webpack, probably same scenario as @The-Code-Monkey

"@storybook/react": "^6.5.12",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"

what exactly in CRA5 makes the system work? I am looking to manually upgrade the necessary dependency but slightly unsure on where the break is here

dimitur2204 · 2022-10-14T12:37:48Z

Hi, I am having this issue in a non CRA boilerplate but in a project with just storybook and webpack, probably same scenario as @The-Code-Monkey
"@storybook/react": "^6.5.12",
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
what exactly in CRA5 makes the system work? I am looking to manually upgrade the necessary dependency but slightly unsure on where the break is here

@cpvalente Try different versions of webpack, I honestly doubt the issue is anywhere else

Edit: That would also mean that the problems is not in CRA, but rather in webpack. I don't know if it matters to anyone though since the maintainers said they wouldn't be supporting older versions of bundlers!

aspirisen · 2022-10-28T13:54:33Z

For me this fixed storybook storybookjs/storybook#16690 (comment)

thib3113 · 2022-10-28T19:24:24Z

I will close the issue here .

If you got this error, you can :
-> fix the version of react-toastify to 9.0.3
-> upgrade to CRA 5 / webpack 5

But, CRA 5 / webpack 5 stop including nodejs polyfills by defaults

So, if you got errors with storybook, or any other error related, you need to add them manually ( you can find more informations on the CRA repository, or on the web ) .

About the why it works with 9.0.3 and not with 9.0.4, it's writted in the release note of the 9.0.4

linhvuquach · 2022-11-02T07:26:51Z

cool, I fixed the version of react-toastify to 9.0.3 when working on project SP Extensions

Snouzy · 2022-11-13T13:02:31Z

Same here. So it's time to switch to vite ? ahah

fkhadra · 2022-11-13T13:04:19Z

@Snouzy either you upgrade CRA or you switch to vite. I'd like to remind that CRA v4 is more than 2 years old.

Snouzy · 2022-11-13T13:05:31Z

Yup ahah, i will !
thanks buddy :)

I pinned to version 9.0.3 due to this issue: fkhadra/react-toastify#775

…397) See https://reportedcab.slack.com/archives/C9VNM3DL4/p1672888880155269: > What do you think of replacing the react modals with alerts? instead > of dismissing the popup it would be some text that disappears after a > few seconds I pinned to react-toastify version 9.0.3 due to this issue: fkhadra/react-toastify#775 See here for a demo of react-toastify: https://fkhadra.github.io/react-toastify/introduction Example images: mobile alert/warning: ![image](https://user-images.githubusercontent.com/6473925/214184085-a2120937-cab5-4475-897e-334109dac988.png) desktop alert/warning: ![image](https://user-images.githubusercontent.com/6473925/214182462-7a625d22-e123-4c43-8557-d0f1270d79ff.png) <img width="781" alt="image" src="https://user-images.githubusercontent.com/6473925/214182868-e357a837-f361-4ab5-a9db-4389ec305fa9.png"> desktop success: ![image](https://user-images.githubusercontent.com/6473925/214182509-c6f5e379-c713-4686-87d2-e1c67272e253.png)

jessewriter · 2023-03-10T18:10:58Z

still an issue with ^9.1.1

thib3113 · 2023-03-10T18:25:12Z

@jessewriter this issue will not be fixed : #775 (comment)

ASADRAZAASCEND · 2024-05-12T11:11:28Z

Still facing the same issue in node v22.1.0. there error is "133.0 ./node_modules/react-toastify/dist/react-toastify.esm.mjs
133.0 Can't import the named export 'cloneElement' from non EcmaScript module (only default export is available)".

fkhadra changed the title ~~Can't import the named export 'cloneElement' from non EcmaScript module~~ [CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module Jun 8, 2022

fkhadra self-assigned this Jun 8, 2022

This was referenced Jun 23, 2022

[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module #775 Yoon-Suji/near-marketplace-contract#1

Closed

[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module Yoon-Suji/near-marketplace#1

Open

This was referenced Aug 30, 2022

Update dependency react-toastify to v9 dataware-tools/app-common#441

Closed

Use webpack5 in storybook dataware-tools/dev-tools-for-apps#128

Merged

Bump react toastify to v9 with dev tools dataware-tools/app-common#477

Merged

fkhadra changed the title ~~[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module~~ [CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module. PLEASE UPGRADE YOUR CRA VERSION 😿 Oct 8, 2022

thib3113 closed this as completed Oct 28, 2022

josephfrazier added a commit to josephfrazier/reported-web that referenced this issue Jan 21, 2023

Install react-toastify@9.0.3

cd75aed

I pinned to version 9.0.3 due to this issue: fkhadra/react-toastify#775

josephfrazier mentioned this issue Jan 21, 2023

Use toast notification instead of modal for warning/success messages josephfrazier/reported-web#397

Merged

blahosyl mentioned this issue Aug 14, 2024

USER STORY: Confirm Create/Edit/Delete Completion/Cancel blahosyl/task-manager-frontend#29

Closed

14 tasks

[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module. PLEASE UPGRADE YOUR CRA VERSION 😿 #775

[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module. PLEASE UPGRADE YOUR CRA VERSION 😿 #775

Comments

thib3113 commented Jun 7, 2022

Robloche commented Jun 8, 2022

fkhadra commented Jun 8, 2022

fkhadra commented Jun 8, 2022

fkhadra commented Jun 8, 2022

thib3113 commented Jun 8, 2022

fkhadra commented Jun 8, 2022 • edited Loading

fkhadra commented Jun 8, 2022

thib3113 commented Jun 8, 2022 • edited Loading

Robloche commented Jun 8, 2022

fkhadra commented Jun 8, 2022

cakonze commented Jun 8, 2022

forgowhisky commented Jun 8, 2022

Joshua-Enrico commented Jun 9, 2022

thib3113 commented Jun 9, 2022

dimitur2204 commented Jun 9, 2022

sumitk-singh commented Jun 11, 2022

fmenes01 commented Jun 13, 2022

mahmoud-ahmed-elqenawey commented Jun 14, 2022

djaffer commented Jun 16, 2022 • edited Loading

bluepeter commented Jun 21, 2022 • edited Loading

drethedevjs commented Jun 24, 2022

Robloche commented Jul 19, 2022

fkhadra commented Jul 19, 2022

Robloche commented Jul 19, 2022

djaffer commented Jul 20, 2022 • edited Loading

ashikibrahim commented Jul 29, 2022 • edited Loading

PranoySarker commented Aug 25, 2022

cristoferrao commented Aug 25, 2022

garvae commented Sep 22, 2022

congduong97 commented Sep 23, 2022

John-Yue commented Sep 29, 2022

ruymaster commented Oct 4, 2022

iamrosada commented Oct 4, 2022

cpvalente commented Oct 14, 2022

dimitur2204 commented Oct 14, 2022 • edited Loading

aspirisen commented Oct 28, 2022

thib3113 commented Oct 28, 2022 • edited Loading

linhvuquach commented Nov 2, 2022

Snouzy commented Nov 13, 2022 • edited Loading

fkhadra commented Nov 13, 2022

Snouzy commented Nov 13, 2022

jessewriter commented Mar 10, 2023

thib3113 commented Mar 10, 2023 • edited Loading

ASADRAZAASCEND commented May 12, 2024

fkhadra commented Jun 8, 2022 •

edited

Loading

thib3113 commented Jun 8, 2022 •

edited

Loading

djaffer commented Jun 16, 2022 •

edited

Loading

bluepeter commented Jun 21, 2022 •

edited

Loading

djaffer commented Jul 20, 2022 •

edited

Loading

ashikibrahim commented Jul 29, 2022 •

edited

Loading

dimitur2204 commented Oct 14, 2022 •

edited

Loading

thib3113 commented Oct 28, 2022 •

edited

Loading

Snouzy commented Nov 13, 2022 •

edited

Loading

thib3113 commented Mar 10, 2023 •

edited

Loading