React 18 , FC component children deps

[Necmttn]

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch next-themes@0.0.15 for the project I'm working on.

Here is the diff that solved my problem:

diff --git a/node_modules/next-themes/dist/index.d.ts b/node_modules/next-themes/dist/index.d.ts
index 48268b9..5313361 100644
--- a/node_modules/next-themes/dist/index.d.ts
+++ b/node_modules/next-themes/dist/index.d.ts
@@ -1,41 +1,43 @@
 import React from 'react';
 interface UseThemeProps {
-    /** List of all available theme names */
-    themes: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Update the theme */
-    setTheme: (theme: string) => void;
-    /** Active theme name */
-    theme?: string;
-    /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
-    resolvedTheme?: string;
-    /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
-    systemTheme?: 'dark' | 'light';
+  /** List of all available theme names */
+  themes: string[];
+  /** Forced theme name for the current page */
+  forcedTheme?: string;
+  /** Update the theme */
+  setTheme: (theme: string) => void;
+  /** Active theme name */
+  theme?: string;
+  /** If `enableSystem` is true and the active theme is "system", this returns whether the system preference resolved to "dark" or "light". Otherwise, identical to `theme` */
+  resolvedTheme?: string;
+  /** If enableSystem is true, returns the System theme preference ("dark" or "light"), regardless what the active theme is */
+  systemTheme?: 'dark' | 'light';
 }
 export interface ThemeProviderProps {
-    /** List of all available theme names */
-    themes?: string[];
-    /** Forced theme name for the current page */
-    forcedTheme?: string;
-    /** Whether to switch between dark and light themes based on prefers-color-scheme */
-    enableSystem?: boolean;
-    /** Disable all CSS transitions when switching themes */
-    disableTransitionOnChange?: boolean;
-    /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
-    enableColorScheme?: boolean;
-    /** Key used to store theme setting in localStorage */
-    storageKey?: string;
-    /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
-    defaultTheme?: string;
-    /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
-    attribute?: string | 'class';
-    /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
-    value?: ValueObject;
+  /** List of all available theme names */
+  themes?: string[];
+  /** Forced theme name for the current page */
+  forcedTheme?: string;
+  /** Whether to switch between dark and light themes based on prefers-color-scheme */
+  enableSystem?: boolean;
+  /** Disable all CSS transitions when switching themes */
+  disableTransitionOnChange?: boolean;
+  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
+  enableColorScheme?: boolean;
+  /** Key used to store theme setting in localStorage */
+  storageKey?: string;
+  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
+  defaultTheme?: string;
+  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
+  attribute?: string | 'class';
+  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
+  value?: ValueObject;
+
+  children: React.ReactNode;
 }
 export declare const useTheme: () => UseThemeProps;
 interface ValueObject {
-    [themeName: string]: string;
+  [themeName: string]: string;
 }
 export declare const ThemeProvider: React.FC<ThemeProviderProps>;
-export {};
+export { };

This issue body was partially generated by patch-package.

[hcharley]

I believe this issue is likely from the @types/react 18 upgrade:

https://solverfox.dev/writing/no-implicit-children/

[bees]

As a temporary fix until the this repo is updated, you can use module augmentation to extend the props type to add back a children type annotation:

import 'next-themes';

declare module 'next-themes' {
  interface ThemeProviderProps {
    children: React.ReactNode;
  }
}

in some .d.ts file that tsc will pull in.