Warning when doing ssr

[veritem]

I'm using remix but the warning persist

How can i fix it?

[veritem]

I found how to fix it thanks 👍

[snax4a]

I am seeing same warning in next.js app. Fixed that by putting the Toaster component inside HOC which renders children only in client-side

[shubhenducw]

I found how to fix it thanks 👍

@veritem I am facing the same issue for Remix JS project. What was the solution?

[veritem]

@shubhenducw you need to import <Toaster> in root.tsx and add it bellow <Outlet/> in your root component

[gijs]

Fixed it in Remix.run by using <ClientOnly /> from remix-utils:

          <Outlet />
          <ClientOnly fallback={<p>Loading...</p>}>
            {() => (
              <Toaster
                toastOptions={{
                  success: {
                    style: {
                      background: "black",
                      color: "white",
                    },
                  },
                }}
              />
            )}
          </ClientOnly>
          <ScrollRestoration />
          <Scripts />
          <LiveReload />

[pablogravielseo]

hi @veritem, I wonder if you can share the code for the fix, I don't know how to fix it.

[veritem]

Here is a snippet of how to do it in your root.tsx add

[toddtarsi]

Just noting here, all of these fixes are phrased around NextJS and Remix.run. I wish that we weren't coupling server architecture into the fix. How do we resolve this just using SSR with React 18?

[toddtarsi]

I figured it out. If you want to avoid having SSR issues, just do this for React 18:

<React.Suspense>
  <Toaster />
</React.Suspense>