Toastify React, error when attempting to use

Question

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.

I deleted nod_modules and package-lock.json and run 'yarn' instead. Everything worked — Abdulhakim
– Abdulhakim, Commented Jul 11, 2023 at 12:08

Steve · Accepted Answer · 2022-06-30 12:32:47Z

16

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.

answered Jun 30, 2022 at 12:32

Steve

1612 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steffen Frank · Accepted Answer · 2022-06-20 02:46:59Z

9

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

answered Jun 20, 2022 at 2:46

Steffen Frank

1,9179 silver badges17 bronze badges

Comments

vimuth · Accepted Answer · 2022-08-25 07:40:43Z

4

All you need to do is this

npm i [email protected]

edited Aug 25, 2022 at 7:40

vimuth

5,87355 gold badges98 silver badges128 bronze badges

answered Aug 21, 2022 at 15:54

Benneth

411 bronze badge

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

N_Z · Accepted Answer · 2022-10-05 21:35:37Z

1

I faced the same issue in React 18.2.0, which was fixed by:

#upgrading to the latest version of react-scripts
npm install [email protected]  # OR npm install --save react-scripts@latest

#if you encounter errors after upgrading.
rm -r node_modules
npm install

answered Oct 5, 2022 at 21:35

N_Z

9371 gold badge11 silver badges24 bronze badges

Comments

Matheus Alves · Accepted Answer · 2022-06-20 02:47:22Z

0

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

answered Jun 20, 2022 at 2:47

Matheus Alves

563 bronze badges

Comments

Clinton · Accepted Answer · 2022-06-20 13:24:42Z

0

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

answered Jun 20, 2022 at 13:24

Clinton

1711 gold badge1 silver badge4 bronze badges

Comments

Hossam Metwaly · Accepted Answer · 2022-10-24 11:32:23Z

0

I had the same problem, I have tried to update my yarn , and react versions , but the problem was still there. the best way is to downgrade toastify version to 8.0.0, and it will work.

use this command:
```
npm i [email protected]
```
or: if you are using yarn
```
yarn add [email protected]
```

answered Oct 24, 2022 at 11:32

Hossam Metwaly

12 bronze badges

Comments

mann__10 · Accepted Answer · 2024-02-24 11:08:37Z

0

Just use this as import import 'react-toastify/dist/ReactToastify.css';

answered Feb 24, 2024 at 11:08

mann__10

495 bronze badges

Comments

Matansaban · Accepted Answer · 2024-10-12 19:43:41Z

0

everything worked for me when i used the ToasterContainer with self closing tag like this :

<ToasterContainer/>

edited Oct 12, 2024 at 19:43

answered Oct 12, 2024 at 19:43

Matansaban

14 bronze badges

Collectives™ on Stack Overflow

Toastify React, error when attempting to use

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related