T
TanStack•8mo ago
continuing-cyan

server rendered emotion / css in js in tanstack start

i've been having issues with my css in js styles being applied through chakra ui, which uses emotion under the hood. it looks like emotion exposes its own functions that need to run during the hydration step, and chakra has a guide here for setting it up with remix https://v2.chakra-ui.com/getting-started/remix-guide. does tanstack start have a similar way to override the defaultStreamHandler from ssr.tsx? i suspect that's what i'll need to do
6 Replies
like-gold
like-gold•8mo ago
@Eelco used chakra v3 rather easily, so it's v2 that is the problem here?
typical-coral
typical-coral•8mo ago
Surprise, I updated tanstack today to latest, and the weird hydration errors are back 😅 I'm not sure if it's related to emotion but it seems so. @matthewsomethin you can try using defaultRenderHandler instead.
like-gold
like-gold•8mo ago
oh no. can you provide an example?
typical-coral
typical-coral•8mo ago
actually can't reproduce it anymore, seems te be working OK now we use defaultStreamHandler (default setup) and in __root.tsx 
export function RootDocument({ children }: { children: React.ReactNode }) {
  const emotionCache = createCache({ key: 'chakra-ui' })

  return (
    <html>
      <head>
        <Meta />
      </head>
      <body>
        <CacheProvider value={emotionCache}>{children}</CacheProvider>

        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}
export function RootDocument({ children }: { children: React.ReactNode }) {
  const emotionCache = createCache({ key: 'chakra-ui' })

  return (
    <html>
      <head>
        <Meta />
      </head>
      <body>
        <CacheProvider value={emotionCache}>{children}</CacheProvider>

        <ScrollRestoration />
        <Scripts />
      </body>
    </html>
  )
}
Right now ssr: false, is set on the root route as well, I'm not 100% sure if this has any effect. We had some issues where we would get emotion/react was loaded twice, and useRef / useContext could not be called from null , could be related to HMR.
like-gold
like-gold•8mo ago
no does not have effect on root
continuing-cyan
continuing-cyanOP•8mo ago
was also seeing issues about useContext could not be called from null. is there a way to trigger a page reload in change since HMR is busted @Manuel Schiller

Did you find this page helpful?