I tried a demo in an existing project. This project is not a pure React project, and I'm not very familiar with React.
I created a TSX file with the code as follows:
import toast, { Toaster } from 'react-hot-toast';
import * as React from "react";
import * as ReactDOM from "react-dom/client";
export class HotToast {
public readonly root: any;
constructor(props: {
id: string;
}) {
this.root = ReactDOM.createRoot(document.getElementById(props.id));
this.root.render(<><Toaster /></>)
}
public alert(message: string, options?: any) {
toast(message, options);
}
}
Then an error is reported, and the information is shown in the figure:
I tried modifying the index.d.ts file for react-hot-toast to declare const Toaster: react. FC<ToasterProps>; Comment out, change to:
The error disappeared, and it can be used normally in my project, everything goes well. But I think this is not elegant, so how can I write a non-error code without modifying the react-hot-toast code? I wrote in accordance with the official example.
Here are some of my package.json information:
I tried a demo in an existing project. This project is not a pure React project, and I'm not very familiar with React. I created a TSX file with the code as follows:
Then an error is reported, and the information is shown in the figure: I tried modifying the
index.d.ts
file forreact-hot-toast
todeclare const Toaster: react. FC<ToasterProps>;
Comment out, change to:The error disappeared, and it can be used normally in my project, everything goes well. But I think this is not elegant, so how can I write a non-error code without modifying the
react-hot-toast
code? I wrote in accordance with the official example. Here are some of mypackage.json
information:And
tsconfig.json
information: