`Uncaught ReferenceError: React is not defined` while using a custom hook

[lethib]

Hi,

I would like to set up a title and a description for my toasts thus I have made a custom useToast() hook that calls the toast() method from the lib and returns the same toast function with some JSX inside. However, toasts are working nicely when directly importing the toast() function inside my component. What am I missing here ?

Here my useToast.tsx hook:

import { Toast, type ToastProps } from "components/ui/Toast.tsx";
import { toast as RHTtoast } from "react-hot-toast";

export const useToast = () => {
  const toast = {
    success: ({ title, description }: ToastProps) =>
      RHTtoast.success(() => <Toast title={title} description={description} />),
    error: ({ title, description }: ToastProps) =>
      RHTtoast.error(() => <Toast title={title} description={description} />),
  };

  return { toast };
};

Toast.tsx

export type ToastProps = {
  title: string;
  description?: string;
};

export const Toast = ({ title, description }: ToastProps) => (
  <span>
    <strong>{title}</strong>
    {description && <p>{description}</p>}
  </span>
);

And I am using this hook inside my LoginPage.tsx (only for test purposes) like this:

export const LoginPage = () => {
  const { toast } = useToast();
  
  // other logic here

  toast.success({ title: "Title test" });

  return (
     <SomeJSXComponents />
  );
};

For my project I am using Deno (v2.2.2) with Vite to build my SPA.