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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

{{title}}

Replies: 1 comment

{{title}}

Select a reply

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

merthanmerter Apr 25, 2024

Replies: 1 comment

merthanmerter Apr 26, 2024 Author

merthanmerter
Apr 25, 2024

merthanmerter
Apr 26, 2024
Author