Running yarn build fails on fresh installation

[mystogan99]

Describe the bug Running yarn build for the perplexica-frontend project fails with a type error in the EmptyChat.tsx component. The error message indicates that the size property passed to the ThemeSwitcher component does not exist on the expected prop types.

To Reproduce Steps to reproduce the behavior:

1. Clone the Project
2. Change all the configs as defined in the Readme
3. run docker compose up -d --build

4. See error

   ./components/EmptyChat.tsx:15:22
   Type error: Type '{ size: number; className: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string | undefined; }'.
   Property 'size' does not exist on type 'IntrinsicAttributes & { className?: string | undefined; }'.
   
   13 |   return (
   14 |     <div className="relative">
   > 15 |       <ThemeSwitcher size={17} className="absolute top-2 right-0 lg:hidden" />
    |                      ^
   16 |
   17 |       <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
   18 |         <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">

Expected behavior The yarn build command should compile the project successfully without any type errors.

Screenshots

Additional context

• The error occurs in the EmptyChat.tsx file on line 15.
• The ThemeSwitcher component is being passed a size prop of type number, but it seems that the component's prop types do not include a size property.

[WanQuanXie]

You can temporarily remove the <ThemeSwitcher/> from EmptyChat.tsx and Navbar.tsx to fix it. Refer to this PR #168

[nuwansamaranayake]

I am getting the same error. "You can temporarily remove the from EmptyChat.tsx and Navbar.tsx to fix it." what should I remove from EmtpyChat.tsx and Navbar.tsx files ?

[WanQuanXie]

I am getting the same error. "You can temporarily remove the from EmptyChat.tsx and Navbar.tsx to fix it." what should I remove from EmtpyChat.tsx and Navbar.tsx files ?

Sorry, there are some words lost. You should remove the <ThemeSwitcher/>. I re-edit my reply above.

[eviljosh]

Another workaround: we can leave ThemeSwitcher in place and update the definition.

In ui/components/theme/Switcher.tsx, update the existing definition of the component to add an optional size prop, e.g.:

const ThemeSwitcher = ({ className, size }: { className?: string; size?: number })

[mystogan99]

@eviljosh Your solution works perfectly well. I am closing this now.