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

[thib3113]

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 )

[Robloche]

Exact same issue for me.

[fkhadra]

I'm on it

[fkhadra]

@Robloche you are using latest CRA?

[fkhadra]

@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]

@fkhadra not so easy ...

CRA 5 use webpack 5, which remove node js polyfill ; And lot of people can't migrate to it : https://github.com/facebook/create-react-app/issues/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]

@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]

I've also found this solution, for those who cannot migrate to v5 https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022

[thib3113]

@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]

@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]

@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]

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]

also getting this

[Joshua-Enrico]

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]

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

[dimitur2204]

Same here 9.0.3 seems to work fine though.

[sumitk-singh]

having the same isuue

[fmenes01]

same problem

[mahmoud-ahmed-elqenawey]

having the same isuue

[djaffer]

same issue. Thanks @fkhadra for solution.

[bluepeter]

Still the same issue in 9.0.5

[drethedevjs]

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]

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]

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 https://github.com/reactioncommerce/reaction-component-library/issues/399#issuecomment-467860022

[Robloche]

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]

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]

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.

[murillo94]

in your webpack config file, just follow theses steps here

[ahemadShaikh]

i am having same issue @fkhadra

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

please help @fkhadra

[The-Code-Monkey]

Im getting this issue using the latest version of storybook and react, and its actually crashing my storybook.

[Davenporten]

I'm seeing this issue with CRA5 and >=v9.0.4

[fkhadra]

@The-Code-Monkey Any repo to share?

@Davenporten I've created a project with CRA5 and it worked as expected. Are you sure, you are using the right react-scripts version ?

[Davenporten]

I've been trying out the react-app-rewired solution and am waiting for things to compile/index. I will revert back in just a little to confirm. Thanks for the quick response!

[fkhadra]

I'll try tomorrow with the rewired solution and keep you posted

[PranoySarker]

i have the same issue and i have used create-react-app my react-toastify version is ^9.0.8. please help me Here is the full message: ./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)

[cristoferrao]

me to same issue just updated to ^9.0.8 from ^7.0.4

[PranoySarker]

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

[cristoferrao]

thanks

[garvae]

same issue

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

[congduong97]

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]

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]

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]

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]

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]

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]

For me this fixed storybook https://github.com/storybookjs/storybook/issues/16690#issuecomment-971579785

[thib3113]

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]

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

[Snouzy]

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

[fkhadra]

@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]

Yup ahah, i will ! thanks buddy :)