conscious-sapphire

Cannot make react context work during SSR

I made a simple ThemeContext, I have a providers file which is loading all the providers.

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html
      lang="en"
    >
      <head>
        <HeadContent />
      </head>
      <body>
        <AppProviders>
          <div className="flex min-h-screen flex-col">
            <AppHeader />
            <main className="flex-1">{children}</main>
            <TanStackDevtools
              config={{
                position: 'bottom-left',
              }}
              plugins={[
                debugControlsDevtoolsPlugin,
                {
                  name: 'Tanstack Router',
                  render: <TanStackRouterDevtoolsPanel />,
                },
              ]}
            />
          </div>
        </AppProviders>
        <Scripts />
      </body>
    </html>
  )
}

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html
      lang="en"
    >
      <head>
        <HeadContent />
      </head>
      <body>
        <AppProviders>
          <div className="flex min-h-screen flex-col">
            <AppHeader />
            <main className="flex-1">{children}</main>
            <TanStackDevtools
              config={{
                position: 'bottom-left',
              }}
              plugins={[
                debugControlsDevtoolsPlugin,
                {
                  name: 'Tanstack Router',
                  render: <TanStackRouterDevtoolsPanel />,
                },
              ]}
            />
          </div>
        </AppProviders>
        <Scripts />
      </body>
    </html>
  )
}

In a component I'm trying to call my useTheme hook.

export const useTheme = () => {
  const context = use(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within a ThemeContextProvider')
  }
  return context
}

export const useTheme = () => {
  const context = use(ThemeContext)
  if (!context) {
    throw new Error('useTheme must be used within a ThemeContextProvider')
  }
  return context
}