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

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
}

I'm getting this error whenever a route is having a call to

useTheme

useTheme

on server side, on client side it works.

Not sure what I'm missing.

TanStack•6mo ago•

11 replies

dead-brown

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

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
}

I'm getting this error whenever a route is having a call to

useTheme

useTheme

on server side, on client side it works.

Not sure what I'm missing.

Cannot make react context work during SSR

Similar Threads

Cannot make react context work during SSR

Similar Threads

Similar Threads

Similar Threads