react-select stripped of styles in indie stack

[twilczek]

Hello,

any ideas why react-select comes up totally unstyled?

I npm installed react-select to the plain indie-stack and added a simplest example of a react-select to the main page. But it looks as below:

btw. It shows up properly for a very short while...

In react-select it says it should work fine with ssr https://react-select.com/advanced#ssr---universal-rendering

[sethwebster]

I am also seeing this. @twilczek Are you also seeing hydration errors?

[lili21]

the way remix handle style is kinda different. I guess you can look at the remix/emotion example, to make the emotion work.

[ovieokeh]

If anyone else is facing this, this answer worked for me.

Also, make sure your markup is correct, e.g, having an tag inside a Remix tag

[HunnySajid]

Hey @twilczek any luck with this? I tried both of the solutions but it did not work.
Did you get it resolved?

[HunnySajid]

The remix-run/emotions example is not updated as it uses react 17.2 and rendrerToString method instead of renderToPipeableStream
I am not sure how to inject the style tag for emotions in the stream.
I think it is an issue with all of the css-in-js libraries as this issue on styled-component indicates.
So I think the solution is yet to be implemented in order to use React18 with css-in-js and SSR.

[dmarkow]

This happens due to browser extensions injecting code into the page before hydration takes place. I have react-select working with the indie stack. The only change you have to make is using hydrate instead of hydrateRoot in entry.client.tsx. You will get console warnings about hydrate not supported in React 18, but as far as I know this is the only way to get it working properly with SSR right now.

https://codesandbox.io/s/objective-bush-gxpu04?file=/app/entry.client.tsx

[numandev1]

@dmarkow your solution is working, did you get any proper way to make it work on React 18. currently getting this warning

upported in React 18. Use hydrateRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more:

[dmarkow]

@numandev1 Yes, by finally replacing react-select with @tailwindlabs/headlessui Combobox so I could get rid of the emotion dependency... Probably not the answer you wanted to hear.

[mauscoelho]

I also opted to switch to another library (downshift) for the same reason of not having emotion dependency 😂 But using the hydrate until the migration is completed

[kwando]

Ofc.. another thing not working in remix. FML.

[RoystonD-16]

So that we can't use react-select in remix project

Is there any solutions found

[evanstern]

I'm finding that it works in a production build but is inconsistently stripped of styles when refreshing in development mode (npm run dev). It seems to render fine until the page is refreshed, then it loses all styles. In production builds I haven't been able to reproduce this.

[evanstern]

An update. I was able to get this working by following the guide from Chakra UI.

https://v2.chakra-ui.com/getting-started/remix-guide

[RoystonD-16]

Hi @evanstern so you are using react-select with chakra ui. could you share sample code snippet for reference

[evanstern]

Hey @RoystonD-16

I'm actually not using Chakra (although it's a really cool library). However, the solution outlined in the link I provided above also seems to work for react-select.

Here's the relevant files and content I used to get this working:

// emotion-server.context.ts
import { createContext } from "react";

export interface EmotionServerContextType {
  key: string;
  ids: Array<string>;
  css: string;
}

export const EmotionServerContext = createContext<
  null | EmotionServerContextType[]
>(null);

// emotion-client.context.ts
import { createContext } from "react";

export interface EmotionClientContextType {
  reset: () => void;
}

export const EmotionClientContext = createContext<EmotionClientContextType>({
  reset: () => {},
});

// utils/create-emotion-cache.ts
import createCache from "@emotion/cache";

export const defaultCache = createEmotionCache();

export function createEmotionCache() {
  return createCache({ key: "remix-css", prepend: false });
}

// root.tsx
import { withEmotionCache } from "@emotion/react";
import { MetaFunction } from "@remix-run/node";
import {
  Links,
  Meta,
  Outlet,
  Scripts,
  ScrollRestoration,
  useRouteError,
} from "@remix-run/react";
import { useContext, useEffect } from "react";
import { BasicErrorDisplay } from "./components/basic-error-display";
import { EmotionClientContext } from "./context/emotion-client.context";
import { EmotionServerContext } from "./context/emotion-server.context";
import "./fonts.css";
import "./tailwind.css";

export const meta: MetaFunction = () => {
  return [{ title: "My React App" }];
};

interface DocumentProps {
  children: React.ReactNode;
  title?: string;
}

const Document = withEmotionCache(
  ({ children, title }: DocumentProps, emotionCache) => {
    const serverStyleData = useContext(EmotionServerContext);
    const clientStyleData = useContext(EmotionClientContext);

    // Only executed on client
    useEffect(() => {
      // Prevent unnecessasry re-renders
      if (document.head === emotionCache.sheet.container) return;

      // re-link style container
      emotionCache.sheet.container = document.head;

      // Re-inject tags
      const tags = emotionCache.sheet.tags;
      emotionCache.sheet.flush();
      tags.forEach((tag) => {
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        (emotionCache.sheet as any)._insertTag(tag);
      });

      // Reset cache to re-apply global styles
      clientStyleData.reset;
    }, [clientStyleData.reset, emotionCache.sheet]);

    return (
      <html lang="en" className="h-full">
        <head>
          {title ? <title>{title}</title> : null}
          <meta charSet="utf-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1" />
          <Meta />
          <Links />
          {serverStyleData?.map(({ key, ids, css }) => (
            <style
              key={key}
              data-emotion={`${key} ${ids.join(" ")}`}
              dangerouslySetInnerHTML={{ __html: css }}
            />
          ))}
        </head>
        <body className="flex h-full flex-col items-center justify-center">
          {children}
          <ScrollRestoration />
          <Scripts />
        </body>
      </html>
    );
  },
);

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

// entry.client.tsx
/**
 * By default, Remix will handle hydrating your app on the client for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.client
 */

import { CacheProvider } from "@emotion/react";
import { RemixBrowser } from "@remix-run/react";
import { startTransition, StrictMode, useCallback, useState } from "react";
import { hydrateRoot } from "react-dom/client";
import { EmotionClientContext } from "./context/emotion-client.context";
import { createEmotionCache, defaultCache } from "./utils";

interface ClientCacheProviderProps {
  children: React.ReactNode;
}

function ClientCacheProvider({ children }: ClientCacheProviderProps) {
  const [cache, setCache] = useState(defaultCache);

  const reset = useCallback(() => {
    setCache(createEmotionCache());
  }, []);

  return (
    <EmotionClientContext.Provider value={{ reset }}>
      <CacheProvider value={cache}>{children}</CacheProvider>
    </EmotionClientContext.Provider>
  );
}

startTransition(() => {
  hydrateRoot(
    document,
    <StrictMode>
      <ClientCacheProvider>
        <RemixBrowser />
      </ClientCacheProvider>
    </StrictMode>,
  );
});

/**
 * By default, Remix will handle generating the HTTP Response for you.
 * You are free to delete this file if you'd like to, but if you ever want it revealed again, you can run `npx remix reveal` ✨
 * For more information, see https://remix.run/file-conventions/entry.server
 */

import { PassThrough } from "node:stream";

import { CacheProvider } from "@emotion/react";
import createEmotionServer from "@emotion/server/create-instance";
import type { AppLoadContext, EntryContext } from "@remix-run/node";
import { createReadableStreamFromReadable } from "@remix-run/node";
import { RemixServer } from "@remix-run/react";
import { isbot } from "isbot";
import { renderToPipeableStream, renderToString } from "react-dom/server";
import { EmotionServerContext } from "./context/emotion-server.context";
import { createEmotionCache } from "./utils";

const ABORT_DELAY = 5_000;

export default function handleRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
  // This is ignored so we can keep it in the template for visibility.  Feel
  // free to delete this parameter in your app if you're not using it!
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
  loadContext: AppLoadContext,
) {
  return isbot(request.headers.get("user-agent") || "")
    ? handleBotRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
      )
    : handleBrowserRequest(
        request,
        responseStatusCode,
        responseHeaders,
        remixContext,
      );
}

function handleBotRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {
  return new Promise((resolve, reject) => {
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    const html = renderToString(
      <EmotionServerContext.Provider value={null}>
        <CacheProvider value={cache}>
          <RemixServer
            // @ts-expect-error remixContext causes a type error
            context={remixContext}
            url={request.url}
            abortDelay={ABORT_DELAY}
          />
        </CacheProvider>
      </EmotionServerContext.Provider>,
    );

    const chunks = extractCriticalToChunks(html);

    let shellRendered = false;
    const { pipe, abort } = renderToPipeableStream(
      <EmotionServerContext.Provider value={chunks.styles}>
        <CacheProvider value={cache}>
          <RemixServer
            // @ts-expect-error remixContext causes a type error
            context={remixContext}
            url={request.url}
            abortDelay={ABORT_DELAY}
          />
        </CacheProvider>
      </EmotionServerContext.Provider>,
      {
        onAllReady() {
          shellRendered = true;
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            }),
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          responseStatusCode = 500;
          // Log streaming rendering errors from inside the shell.  Don't log
          // errors encountered during initial shell rendering since they'll
          // reject and get logged in handleDocumentRequest.
          if (shellRendered) {
            console.error(error);
          }
        },
      },
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

function handleBrowserRequest(
  request: Request,
  responseStatusCode: number,
  responseHeaders: Headers,
  remixContext: EntryContext,
) {
  return new Promise((resolve, reject) => {
    const cache = createEmotionCache();
    const { extractCriticalToChunks } = createEmotionServer(cache);

    const html = renderToString(
      <EmotionServerContext.Provider value={null}>
        <CacheProvider value={cache}>
          <RemixServer
            // @ts-expect-error remixContext causes a type error
            context={remixContext}
            url={request.url}
            abortDelay={ABORT_DELAY}
          />
        </CacheProvider>
      </EmotionServerContext.Provider>,
    );
    const chunks = extractCriticalToChunks(html);

    let shellRendered = false;
    const { pipe, abort } = renderToPipeableStream(
      <EmotionServerContext.Provider value={chunks.styles}>
        <CacheProvider value={cache}>
          <RemixServer
            // @ts-expect-error remixContext causes a type error
            context={remixContext}
            url={request.url}
            abortDelay={ABORT_DELAY}
          />
        </CacheProvider>
      </EmotionServerContext.Provider>,
      {
        onShellReady() {
          shellRendered = true;
          const body = new PassThrough();
          const stream = createReadableStreamFromReadable(body);

          responseHeaders.set("Content-Type", "text/html");

          resolve(
            new Response(stream, {
              headers: responseHeaders,
              status: responseStatusCode,
            }),
          );

          pipe(body);
        },
        onShellError(error: unknown) {
          reject(error);
        },
        onError(error: unknown) {
          responseStatusCode = 500;
          // Log streaming rendering errors from inside the shell.  Don't log
          // errors encountered during initial shell rendering since they'll
          // reject and get logged in handleDocumentRequest.
          if (shellRendered) {
            console.error(error);
          }
        },
      },
    );

    setTimeout(abort, ABORT_DELAY);
  });
}

Hope this helps someone :-)