ThemeProvider returns multiple types

[javi95z]

Type error: 'ThemeProvider' cannot be used as a JSX component. 
Its return type 'string | number | boolean | Iterable<ReactNode> | Element' is not a valid JSX element.

[TomTom-Labs]

For me, the problem was introduced: next-themes ^0.2.1 → ^0.3.0

Type error: 'ThemeProvider' cannot be used as a JSX component.
  Its return type 'string | number | boolean | Element | Iterable<ReactNode>' is not a valid JSX element.
    Type 'string' is not assignable to type 'ReactElement<any, any>'.

[trm217]

@javi95z We need more information if we are to look into this. Can you please provide a reproduction? (Context: I have ~10 Next.js Apps on v14 with next-themes v0.3 running without any such issues)

[vshakun]

Hello!

I have the same issue using

{
  "next-themes": "^0.3.0",
  "react": "^18.2.0", 
  "vite": "^5.2.8"
}

Downgrading next-themes to ^0.2.1 fixes the issue.

[flixlix]

Hey, I assume the issue is currently originating from here: https://github.com/pacocoursey/next-themes/blob/bf0c5a45eaf6fb2b336a6b93840e4ec572bc08c8/next-themes/src/index.tsx#L15

The type react node can be more things than just a JSX Element, so that is probably the issue (see https://reactnative.dev/docs/react-node).

I'll try to submit a PR to fix this issue

[particle4dev]

I'm still encountering this error, any updates?

[thedaviddias]

Same here.

[none23]

To fix the issue you need to upgrade typescript to v5.1+ https://devblogs.microsoft.com/typescript/announcing-typescript-5-1-beta/#decoupled-type-checking-between-jsx-elements-and-jsx-tag-types

[evsasse]

To fix the issue you need to upgrade typescript to v5.1+

Using typescript 5.5.3 and still seeing this issue...

[none23]

Here's a minimal demo: Codesandbox Downgrade typescript to "5.0.4" to see this error