[BUG] ThemeProvider mismatch with next-themes newest version

eunjijeon11 commented 6 months ago

NextUI Version

2.4.0

Describe the bug

I got an error like this. It occured in the app/layout.tsx, which I didn't make any changes after installation.

./app/layout.tsx:35:20
Type error: Property 'children' is missing in type '{ attribute: string; defaultTheme: string; }' but required in type 'ThemeProviderProps'.    

  33 |       <head />
  34 |       <body className={pretendard.className}>
> 35 |         <Providers themeProps={{ attribute: "class", defaultTheme: "light" }}>
     |                    ^
  36 |           <div className="relative flex flex-col h-max">
  37 |             <Navbar />
  38 |             <main className="container mx-auto max-w-8xl flex-grow">

And the problem was prop 'children' in type ThemeProviderProps

export interface ThemeProviderProps {
  /** List of all available theme names */
  themes?: string[] | undefined
  /** Forced theme name for the current page */
  forcedTheme?: string | undefined
  /** Whether to switch between dark and light themes based on prefers-color-scheme */
  enableSystem?: boolean | undefined
  /** Disable all CSS transitions when switching themes */
  disableTransitionOnChange?: boolean | undefined
  /** Whether to indicate to browsers which color scheme is used (dark or light) for built-in UI like inputs and buttons */
  enableColorScheme?: boolean | undefined
  /** Key used to store theme setting in localStorage */
  storageKey?: string | undefined
  /** Default theme name (for v0.0.12 and lower the default was light). If `enableSystem` is false, the default theme is light */
  defaultTheme?: string | undefined
  /** HTML attribute modified based on the active theme. Accepts `class` and `data-*` (meaning any data attribute, `data-mode`, `data-color`, etc.) */
  attribute?: string | 'class' | undefined
  /** Mapping of theme name to HTML attribute value. Object where key is the theme name and value is the attribute value */
  value?: ValueObject | undefined
  /** Nonce string to pass to the inline script for CSP headers */
  nonce?: string | undefined
  /** React children */
  children: React.ReactNode            // <------------------ here
}

When I downgraded the next-themes version from 0.3.0 to 0.2.1, it worked well. I think Next ui should be updated also.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

install next-themes v0.3.0
npm run build

Expected behavior

This error didn't make an effect when I run npm run dev. It occured only when I build the project with npm run build. I expected it to be build successfully.

Screenshots or Videos

No response

Operating System Version

Windows

Browser

Chrome

linear[bot] commented 6 months ago

ENG-949 [BUG] ThemeProvider mismatch with next-themes newest version

wingkwong commented 6 months ago

@eunjijeon11 after digging a bit, I found that next-themes team has already made children optional in this commit because children is not passed in explicitly and they wish to ensure the types are compatible with the previous version. You can see the code in main branch and they haven't released yet. v0.3.0 was out on 13 Mar and the above commit was made on 20 Mar.

Therefore, I don't think it's a good idea to bump next-themes to v.0.3.0 in NextUI since it is a breaking change and that prop would become optional after their next release. I'd suggest you to use our supported version v0.2.1 first and wait for their next release.

Closing - as it's not planned.

eunjijeon11 commented 6 months ago

@wingkwong Ok, but when I started a project with nextui init my-nextui-app, package.json had the next-themes version ^0.3.0. So I think somebody else can have the same problem. Thank you for the fast reply.

wingkwong commented 6 months ago

I'll have a look and get back to you later.

wingkwong commented 6 months ago

@eunjijeon11 I tried to init new projects with app and page template using CLI. It was using ^0.2.1 for both project. Are you using the latest CLI?

eunjijeon11 commented 6 months ago

@wingkwong I'm using next-ui CLI v0.3.1.

eunjijeon11 commented 6 months ago

I checked again and the team member uploaded the version, so there was a problem. I don't think there's anything wrong with nextui.

wingkwong commented 6 months ago

@eunjijeon11 Thanks for the confirmation.

faridvatani commented 2 months ago

I've encountered a TypeScript error that says: Property 'children' is missing in type '{ attribute: string; defaultTheme: string; }' but required in type 'ThemeProviderProps'. To fix this, ensure that the themeProps object includes the children property when it's passed to the NextThemesProvider. To exclude the children property from the themeProps type, you can use Omit<ThemeProviderProps, 'children'>.

"use client";

import * as React from "react";
import { NextUIProvider } from "@nextui-org/system";
import { useRouter } from "next/navigation";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { ThemeProviderProps } from "next-themes/dist/types";

export interface ProvidersProps {
  children: React.ReactNode;
  themeProps?: Omit<ThemeProviderProps, "children">;
}

export function Providers({ children, themeProps }: ProvidersProps) {
  const router = useRouter();

  return (
    <NextUIProvider navigate={router.push}>
      <NextThemesProvider {...themeProps}>{children}</NextThemesProvider>
    </NextUIProvider>
  );
}

nextui-org / nextui