[CRA v4] Can't import the named export 'cloneElement' from non EcmaScript module

[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