Toaster (Sonner) losing styles after navigating back from Error boundary #9318

merthanmerter · 2024-04-25T22:11:11Z

merthanmerter
Apr 25, 2024

I am using sonner with session storage in my app, it works fine unless user navigates to an error page and navigates back (from history). then sonner loses styles until refreshing the page. no matter what I tried, couldn't figure out why. any help will be appreciated.

below my root.tsx

import { cssBundleHref } from '@remix-run/css-bundle';
import type { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  isRouteErrorResponse,
  json,
  useRouteError,
} from '@remix-run/react';
import { StatusCodes, getReasonPhrase } from 'http-status-codes';
import { MinusIcon } from 'lucide-react';
import styles from '~/styles/globals.css?url';
import { Toaster } from './components/ui/sonner';
import NProgress from './contexts/nprogress';
import { popToast } from './server/toast.server';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: styles },
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
];

export async function loader({ request }: LoaderFunctionArgs) {
  const { __toast, headers } = await popToast(request);
  return json({ __toast }, { headers });
}

export function Layout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <Meta />
        <Links />
      </head>
      <body>
        <NProgress />
        <Toaster />
        {children}
        <Scripts />
        <ScrollRestoration />
      </body>
    </html>
  );
}

export const ErrorBoundary = () => {
  const error = useRouteError();
  return (
    <div className="flex items-center justify-center h-screen bg-background text-foreground">
      {error && isRouteErrorResponse(error) ? (
        <div className="inline-flex items-center justify-center font-bold gap-2">
          <span>{error.status}</span>
          <MinusIcon size={24} className="rotate-90" />
          <span>{error.statusText}</span>
        </div>
      ) : (
        <div className="inline-flex items-center justify-center font-bold gap-2">
          <span>{StatusCodes.INTERNAL_SERVER_ERROR}</span>
          <MinusIcon size={24} className="rotate-90" />
          <span>{getReasonPhrase(StatusCodes.INTERNAL_SERVER_ERROR)}</span>
        </div>
      )}
    </div>
  );
};

export default function App() {
  return (
    <>
      <Outlet />
    </>
  );
}

and toaster component;


import { useLoaderData } from '@remix-run/react';
import { useEffect } from 'react';
import { Toaster as Sonner, toast } from 'sonner';

type ToasterProps = React.ComponentProps<typeof Sonner>;

const Toaster = ({ ...props }: ToasterProps) => {
  const { __toast } = useLoaderData<{
    __toast: {
      type: 'error' | 'success';
      message: string;
    } | null;
  }>() ?? { __toast: null };

  useEffect(() => {
    if (__toast) {
      toast[__toast.type](__toast.message);
    }
  }, [__toast]);

  return (
    <Sonner
      closeButton
      className="toaster group"
      toastOptions={{
        classNames: {
          toast:
            'group toast group-[.toaster]:bg-background group-[.toaster]:text-foreground group-[.toaster]:border-border group-[.toaster]:shadow-lg group-[.toaster]:pointer-events-auto group-[.toaster]:select-none',
          description: 'group-[.toast]:text-muted-foreground',
          actionButton: 'group-[.toast]:bg-primary group-[.toast]:text-primary-foreground',
          cancelButton: 'group-[.toast]:bg-muted group-[.toast]:text-muted-foreground',
          closeButton: 'group-[.toast]:bg-foreground group-[.toast]:text-background group-[.toast]:hover:bg-primary',
        },
      }}
      {...props}
    />
  );
};

export { Toaster };

Answered by merthanmerter

Apr 26, 2024

I was able to solve it with following steps;

copy style.css from sonner repo and add it to your project e.g. ./styles/sonner.css
add following code to your root.tsx file to import styles using links function;

import { cssBundleHref } from '@remix-run/css-bundle';
import styles from '~/styles/global.css?url';
import sonnerStyles from '~/styles/sonner.css?url';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: styles },
  { rel: 'stylesheet', href: sonnerStyles },
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
];

View full answer

merthanmerter · 2024-04-26T03:17:38Z

merthanmerter
Apr 26, 2024
Author

I was able to solve it with following steps;

copy style.css from sonner repo and add it to your project e.g. ./styles/sonner.css
add following code to your root.tsx file to import styles using links function;

import { cssBundleHref } from '@remix-run/css-bundle';
import styles from '~/styles/global.css?url';
import sonnerStyles from '~/styles/sonner.css?url';

export const links: LinksFunction = () => [
  { rel: 'stylesheet', href: styles },
  { rel: 'stylesheet', href: sonnerStyles },
  ...(cssBundleHref ? [{ rel: 'stylesheet', href: cssBundleHref }] : []),
];

0 replies

Ife-Ody · 2024-08-30T13:09:40Z

Ife-Ody
Aug 30, 2024

This also worked for me. But I find it strange that this is how we have to use the package. Perhaps this should be investigated further.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Toaster (Sonner) losing styles after navigating back from Error boundary #9318

Uh oh!

{{title}}

Uh oh!

Replies: 2 comments

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Toaster (Sonner) losing styles after navigating back from Error boundary #9318

Uh oh!

merthanmerter Apr 25, 2024

Replies: 2 comments

Uh oh!

merthanmerter Apr 26, 2024 Author

Uh oh!

Ife-Ody Aug 30, 2024

merthanmerter
Apr 25, 2024

merthanmerter
Apr 26, 2024
Author

Ife-Ody
Aug 30, 2024