Issue with @shadcn/ui ThemeProvider during pnpm build #3295

marufh1 · 2024-03-31T18:28:14Z

marufh1
Mar 31, 2024

Overview: While using the ThemeProvider from @shadcn/ui during development with pnpm dev, everything works as expected. However, when building the project using pnpm build, it encounters issues.

Reproduction Steps:

-Start the development server using pnpm dev.
-Observe that the application functions correctly without errors.
-Build the project using pnpm build.
-Observe that the build process encounters errors related to the ThemeProvider.

-Import RootLayout and ThemeProvider.
-Use ThemeProvider inside RootLayout with specific props.
-TypeScript raises an error indicating 'NextThemesProvider' cannot be used as a JSX component.

Expected Behavior: The application should build successfully without errors using pnpm build, just like it does during development with pnpm dev. TypeScript should recognize 'NextThemesProvider' as a valid JSX component and not raise an error.
Actual Behavior: During the build process with pnpm build, the application encounters errors related to the ThemeProvider from @shadcn/ui. These errors prevent the successful completion of the build process. TypeScript raises an error: 'NextThemesProvider' cannot be used as a JSX component.

Error Messages: Type error: 'NextThemesProvider' 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>'.

  5 |
  6 | export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
> 7 |   return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
    |           ^
  8 | }

Code Samples:

RootLayout.tsx:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang='en' suppressHydrationWarning>
      <body className={`container ${inter.className}`}>
        <ThemeProvider
          enableSystem // Enable system theme detection
          attribute='class' // Apply theme class to the body element
          defaultTheme='system' // Use system theme as default
          disableTransitionOnChange // Prevent theme transitions on change
          themes={['light', 'dark', 'orange']} // Define available themes
        >
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

theme-provider.tsx

"use client";

import * as React from "react";
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { type ThemeProviderProps } from "next-themes/dist/types";

export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
}

TypeScript version: 4.9.5
React version: 18.2.0

marufh1 · 2024-04-01T10:24:19Z

marufh1
Apr 1, 2024
Author

Resolved issue by downgrading the next-themes version from 0.3.0 to 0.2.1.

Explanation:
Previously, when using next-themes version 0.3.0, encountered errors during the build process. These errors caused the build to fail without providing clear output or error messages. By downgrading to version 0.2.1, the build process completed successfully without encountering any errors.

Steps taken:

Identified the next-themes package as a potential source of the issue.
Reviewed the changelog and release notes for next-themes to understand any changes or updates between versions.
Decided to downgrade to version 0.2.1 as a workaround to resolve the build errors.
Updated the package.json file to specify next-themes version 0.2.1.
Ran the build process again to confirm the resolution.

Outcome:
By downgrading the next-themes package to version 0.2.1, the build process completed successfully without errors. The application functions as expected, and there are no apparent issues with the downgraded version.

1 reply

Manuelentrena Apr 2, 2024

Thanks, I have had the same error during 2 hours. I have tried another way to solve the error but without success. Downgrading to version 0.2.1 resolves build errors for now.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Issue with @shadcn/ui ThemeProvider during pnpm build #3295

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Issue with @shadcn/ui ThemeProvider during pnpm build #3295

Uh oh!

marufh1 Mar 31, 2024

Code Samples:

Replies: 1 comment · 1 reply

Uh oh!

Uh oh!

marufh1 Apr 1, 2024 Author

Uh oh!

Manuelentrena Apr 2, 2024

marufh1
Mar 31, 2024

Replies: 1 comment 1 reply

marufh1
Apr 1, 2024
Author