ERROR [perplexica-frontend 5/5] RUN yarn build

[foanthoanGH]

RUN yarn install 94.8s => ERROR [perplexica-frontend 5/5] RUN yarn build 54.4s

[perplexica-frontend 5/5] RUN yarn build: 3.426 yarn run v1.22.19 3.487 $ next build 4.518 Attention: Next.js now collects completely anonymous telemetry regarding usage. 4.525 This information is used to shape Next.js' roadmap and prioritize features. 4.525 You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL: 4.525 https://nextjs.org/telemetry 4.525 4.696 ▲ Next.js 14.1.4 4.697 4.881 Creating an optimized production build ... 8.383 (node:41) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. 8.383 (Use node --trace-deprecation ... to show where the warning was created) 27.92 (node:73) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 27.92 (Use node --trace-warnings ... to show where the warning was created) 28.73 (node:73) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. 42.50 ✓ Compiled successfully 42.51 Linting and checking validity of types ... 53.31 Failed to compile. 53.31 53.31 ./components/EmptyChat.tsx:15:22 53.31 Type error: Type '{ size: number; className: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string | undefined; }'. 53.31 Property 'size' does not exist on type 'IntrinsicAttributes & { className?: string | undefined; }'. 53.31 53.31 13 | return ( 53.31 14 |

53.31 > 15 | 53.31 | ^ 53.31 16 | 53.31 17 |

53.31 18 |

53.39 error Command failed with exit code 1. 53.39 info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

failed to solve: process "/bin/sh -c yarn build" did not complete successfully: exit code: 1

[Kylesare57]

ThemeSwitcher.tsx and Navbar.tsx have an invalid size prop, editing them out to only use the class name prop resolves the issue

[Kylesare57]

ThemeSwitcher.tsx and Navbar.tsx have an invalid size prop, editing them out to only use the class name prop resolves the issue

@ItzCrazyKns

[Panda-Kill]

I have met the same issue on both my Windows and MacOS PC.

[Kylesare57]

I have met the same issue on both my Windows and MacOS PC.

There's an issue with ThemeSwitcher.tsx and EmptyChat.tsx, if you edit the size prop out it should work, mine compiled after i did that

[WanQuanXie]

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

[thekingofkode]

Modify Switcher.tsx with:

// Switcher.tsx
'use client';
import { useTheme } from 'next-themes';
import { useCallback, useEffect, useState } from 'react';
import { Select } from '../SettingsDialog';

type Theme = 'dark' | 'light' | 'system';

interface ThemeSwitcherProps {
  className?: string;
  size?: number; // Add the size prop here
}

const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ className, size }) => {
  const [mounted, setMounted] = useState(false);

  const { theme, setTheme } = useTheme();

  const isTheme = useCallback((t: Theme) => t === theme, [theme]);

  const handleThemeSwitch = (theme: Theme) => {
    setTheme(theme);
  };

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    if (isTheme('system')) {
      const preferDarkScheme = window.matchMedia('(prefers-color-scheme: dark)');

      const detectThemeChange = (event: MediaQueryListEvent) => {
        const theme: Theme = event.matches ? 'dark' : 'light';
        setTheme(theme);
      };

      preferDarkScheme.addEventListener('change', detectThemeChange);

      return () => {
        preferDarkScheme.removeEventListener('change', detectThemeChange);
      };
    }
  }, [isTheme, setTheme, theme]);

  // Avoid Hydration Mismatch
  if (!mounted) {
    return null;
  }

  const selectStyle = size ? { fontSize: size } : {}; // Apply the size to the Select component if provided

  return (
    <Select
      className={className}
      style={selectStyle} // Pass the style here
      value={theme}
      onChange={(e) => handleThemeSwitch(e.target.value as Theme)}
      options={[
        { value: 'light', label: 'Light' },
        { value: 'dark', label: 'Dark' }
      ]}
    />
  );
};

export default ThemeSwitcher;

Modify Emptychat.tsx with:

import EmptyChatMessageInput from './EmptyChatMessageInput';
import ThemeSwitcher from './theme/Switcher';

const EmptyChat = ({
  sendMessage,
  focusMode,
  setFocusMode,
}: {
  sendMessage: (message: string) => void;
  focusMode: string;
  setFocusMode: (mode: string) => void;
}) => {
  return (
    <div className="relative">
      <ThemeSwitcher className="absolute top-2 right-0 lg:hidden" />

      <div className="flex flex-col items-center justify-center min-h-screen max-w-screen-sm mx-auto p-2 space-y-8">
        <h2 className="text-black/70 dark:text-white/70 text-3xl font-medium -mt-8">
          Research begins here.
        </h2>
        <EmptyChatMessageInput
          sendMessage={sendMessage}
          focusMode={focusMode}
          setFocusMode={setFocusMode}
        />
      </div>
    </div>
  );
};

export default EmptyChat;

[ItzCrazyKns]

Fixed in the latest release