Toastify React, error when attempting to use

user_19371826 0
Viewed 5498

When ever I attempt importing tosify into react:

Using the following:

import { ToastContainer, toast } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css';

I get the following error:

Failed to compile.

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

Not sure what solution is and have spent alot time trying to find solution but I am unable too, if anything else is needed let me know but when the tosify import not there the site works fine.

reactjs css html javascript
5 Answers

Try by changing the version to older version of toastify. Manually add this in your package.json file "react-toastify": "^8.1.0", , and then run npm i then again run npm start.

user_194521870

As stated in this bug report, this seems to be an issue that appears when react-toastify is used with older versions of react-scripts.

Your options are:

  • upgrade to the newest version of react-scripts (version 5 or above)
  • downgrade react-toastify to version 9.0.3, which seems to still work with older versions of react-scripts
user_75454960

It seems to be some kind of error because of node version. Could you try to reproduce this with latest node version? Don't forget to remove node_modules and yarn.lock | package-lock.json

user_104964920

I solved by updating my node version and react version,

npm install --save react@latest npm install -g npm-check-updates npm audit fix --force

user_193718260

All you need to do is this

npm i react-toastify@9.0.3
user_198146300
Related