#ThemeProvider

1 messages · Page 1 of 1 (latest)

fossil relic
#

I have some issues with my theme provider:
"use client";

import { type ComponentProps } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return (
<NextThemesProvider
storageKey="theme-preference"
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
{...props}
>
{children}
</NextThemesProvider>
);
}

I am trying to use the last version of nextjs but this is from an old version, how may I fix it/make it up to date?

lusty bronzeBOT
#

Hi @fossil relic. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

The code you’ve shared is already in the correct “modern” shape for a Client Component theme provider in the App Router: a use client wrapper that accepts children and is rendered from a Server Component layout, which matches the current pattern shown in the docs for context providers.Context providers

In other words, structurally you don’t need to change this for newer Next.js:

"use client";

import { type ComponentProps } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return (
    <NextThemesProvider
      storageKey="theme-preference"
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
      {...props}
    >
      {children}
    </NextThemesProvider>
  );
}

The main version-related issue mentioned in the templates is that next-themes is not yet updated for React 19, so when you install dependencies for a Next.js 15 template you must use npm i --legacy-peer-deps to avoid peer‑dependency conflicts.Wisp blog template

So to “make it up to date” for the latest Next.js:

  1. Keep this provider as a Client Component and use it from your app/layout.tsx, similar to:

    // app/layout.tsx
import ThemeProvider from "./theme-provider";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  );
}
#

This matches the current recommended pattern.Context providers

  1. If you’re on React 19 canary and using next-themes, install with --legacy-peer-deps as shown in the Wisp template docs until next-themes officially supports React 19.Wisp blog template

The knowledge sources don’t mention any breaking changes to this pattern in newer Next.js versions, so beyond installation flags for next-themes, your provider is already compatible.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fossil relic Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fossil relic
#

@lusty bronze 'NextThemesProvider' refers to a value, but is being used as a type here. Did you mean 'typeof NextThemesProvider'?

lusty bronzeBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

You’re already doing the typeof part correctly; that TypeScript error usually happens if the type alias is missing or not in scope.

This line is the correct modern pattern:

type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

Make sure that:

  1. You have the typeof in the ComponentProps usage (without it, you’d get exactly the error you quoted):

    // ❌ Wrong – causes the error you saw
type ThemeProviderProps = ComponentProps<NextThemesProvider>;

// ✅ Right
type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

  2. NextThemesProvider is imported as a value (which it is in your snippet):

    import { ThemeProvider as NextThemesProvider } from "next-themes";

  3. This file is a Client Component (it is, via "use client"), so you can wrap it in a Server Component layout as shown in the current docs for context providers.Context providers

If you still see the error with the typeof in place, the knowledge sources don’t provide additional detail on next-themes typing issues specifically, so I can’t say more with confidence.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fossil relic Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fossil relic
#

@lusty bronze My code is exactly the following and I still have the error:
"use client";

import { type ComponentProps } from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";

type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
return (
<NextThemesProvider
storageKey="theme-preference"
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
{...props}
>
{children}
</NextThemesProvider>
);
}

lusty bronzeBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

The error you’re seeing:

'NextThemesProvider' refers to a value, but is being used as a type here. Did you mean 'typeof NextThemesProvider'?

is exactly the error TypeScript gives when a value is used where a type is expected, and the usual fix is to wrap it in typeof, which you’ve already done:

type ThemeProviderProps = ComponentProps<typeof NextThemesProvider>;

However, none of the provided Next.js docs or issues mention next-themes’ typings or this specific TypeScript error, so there’s no authoritative guidance in the knowledge sources on why this is still happening or how to resolve it in your setup. The docs only cover the general pattern of wrapping third‑party providers in a "use client" component and using that from your layout, which you’re already following.Context providersThird-party components

Because of that, I can’t confidently tell you more (for example, whether this is due to a specific next-themes version, a TypeScript config issue, or an IDE/plugin quirk) without going beyond the information in the sources.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fossil relic Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fossil relic
#

@lusty bronze That's already what I am doing..

lusty bronzeBOT
#

Let me check the knowledge base for you again. Give me one moment! :books:

#

You’re not doing anything wrong with that typeof usage; your code matches the current, recommended pattern for wrapping a third‑party context provider in a Client Component in the App Router.Context providers

However, the provided knowledge sources don’t contain any information about:

  • TypeScript’s ComponentProps<typeof NextThemesProvider> specifically
  • next-themes’ type definitions
  • This particular compiler error persisting even when typeof is used

So I can’t reliably say why TypeScript still reports that error in your project or suggest a guaranteed fix without going beyond the docs and issues you shared.

What the sources do confirm is only that:

  • Your pattern (“use client” wrapper, accepting children, rendered from a Server Component layout) is the correct and up‑to‑date way to use context providers in the App Router.Context providers
  • Third‑party providers should be wrapped in your own client component and then used from app/layout, which you’re already effectively doing.Rendering third-party providers

Beyond that, the knowledge sources don’t give enough detail to diagnose the TypeScript error itself.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@fossil relic Kapa.ai is still learning and improving, please let me know how I did by reacting below.

fossil relic
#

I am dumb as fuck

#

Just named my file .ts instead of .tsx