React Hot Toast is not working in class component - reactjs

Question

React-hot-toast v4.1.1 is not working in my class component. Earlier I was using React toastify but now I switched to React hot toast. The react-hot-toast is continously giving the error.
TypeError: Object(...) is not a function
./node_modules/react-hot-toast/dist/react-hot-toast.esm.js
import toast, { Toaster } from "react-hot-toast";
class Toast extends Component {
handleToast = () => {
toast("Toast Created.");
};
render() {
return (
<div>
<Toaster />
<button className="btn btn-primary" onClick={this.handleToast}>
Create Toast
</button>
</div>
);
}
}
export default Toast;
here is the error

Answer 1

this is because there are some conflicting dependencies with react-toastify in the newer versions with respect to its predecessor.
Also if you follow some courses they usually provide some resources to proceed with, when you start working on those resource and do a npm i for its dependencies it install certain versions of the package which is specified in the package.json file, so if you are trying to install a new package as a part of the course it might not be compatible with the ones mentioned in the resource files.
So to avoid conflict here you can manually install all the packages mentioned in package.json with the latest versions then install the latest version of react-toastify
OR
Try reverting the version of react-toastify to earlier version , maybe try with react-toastify#4.1 or the version mentioned in the course. (This worked for me)
I think that if you install an older version of react-toastify, it will work just fine