javascriptreactjsnext.jstoastnextui

Export toast doesn't exist in target module - using heroui/toast

Background:

I am trying to add Toast notifications to my nextjs application. I followed the official documentation here: https://www.heroui.com/docs/components/toast

providers.jsx:

import {NextUIProvider} from '@nextui-org/react'
import {useRouter} from "next/navigation";
import {ThemeProvider as NextThemesProvider} from "next-themes";
import {HeroUIProvider} from "@heroui/react";
import {ToastProvider} from "@heroui/toast";

export function Providers({children}) {

    const router = useRouter()

    return (
        <NextUIProvider navigate={router.push}>
            <NextThemesProvider attribute="class" defaultTheme="dark">
                <HeroUIProvider>
                    <ToastProvider toastProps={{
                        radius: "full",
                        color: "primary",
                        variant: "bordered",
                        timeout: 1500,
                        hideIcon: true,
                        classNames: {
                            closeButton: "opacity-100 absolute right-4 top-1/2 -translate-y-1/2",
                        },
                    }} />
                    {children}
                </HeroUIProvider>
            </NextThemesProvider>
        </NextUIProvider>
    )
}

layout.js:

export default function RootLayout({children}) {
    return (
        <html lang="en" suppressHydrationWarning>
        <head title="Hydra Server">
            <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
            <title>Hydra Server</title>
        </head>
        <body
            className={`${geistSans.variable} ${geistMono.variable} antialiased`}
        >
        <Providers>
            <main className="bg-gradient-to-br from-black via-gray-700 to-green-900">
                {children}
            </main>
        </Providers>
        </body>
        </html>
    );
}

Example of adding a Toast:

import {addToast} from "@heroui/toast";

...

    function onError(error) {
        addToast({
            title: "Error",
            description: error.statusText
        });
        setIsLoading(false)
    }

The problem:

When the page is compiled (I'm currently using npm run dev for testing), I get the following errors:

 ⨯ ./node_modules/@heroui/toast/dist/chunk-A3E4DQTR.mjs:5:1
Export toast doesn't exist in target module
  3 | // src/use-toast.ts
  4 | import { mapPropsVariants, useProviderContext } from "@heroui/system";
> 5 | import { toast as toastTheme } from "@heroui/theme";
    | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  6 | import { useDOMRef } from "@heroui/react-utils";
  7 | import { clsx, dataAttr, isEmpty, objectToDeps } from "@heroui/shared-utils";
  8 | import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";

The export toast was not found in module [project]/node_modules/@heroui/theme/dist/index.mjs [app-client] (ecmascript) <exports>.
Did you mean to import tabs?
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.


./node_modules/@heroui/toast/dist/chunk-RJHHOZ5N.mjs:11:1
Export toastRegion doesn't exist in target module
   9 | import { useHover } from "@react-aria/interactions";
  10 | import { mergeProps } from "@react-aria/utils";
> 11 | import { toastRegion } from "@heroui/theme";
     | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  12 | import { jsx } from "react/jsx-runtime";
  13 | function ToastRegion({
  14 |   toastQueue,

The export toastRegion was not found in module [project]/node_modules/@heroui/theme/dist/index.mjs [app-client] (ecmascript) <exports>.
Did you mean to import listboxSection?
All exports of the module are statically known (It doesn't have dynamic exports). So it's known statically that the requested export doesn't exist.

Is this a bug or a problem with my setup?

Solution

  • Seems I hadn't actually installed heroui/react

    I ran npm install @heroui/reactandToast` now works.

    UPDATE:

    I also found out mixing NextUI and HeroUI cause problems with CSS defaults, causing weird behaviour with the ToastProvider

    I followed this and migrated over to HeroUI seamlessly: https://www.heroui.com/docs/guide/nextui-to-heroui