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

[cchhenwei]

I just started running Perplexica on MacOS by using code docker compose up -d, however, the system tells that:

`=> ERROR [perplexica-frontend 5/5] RUN yarn build 20.5s

---

[perplexica-frontend 5/5] RUN yarn build:
0.265 yarn run v1.22.19
0.281 $ next build
0.603 Attention: Next.js now collects completely anonymous telemetry regarding usage.
0.603 This information is used to shape Next.js' roadmap and prioritize features.
0.603 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: 0.603 https://nextjs.org/telemetry 0.603 0.656 ▲ Next.js 14.1.4 0.656 0.703 Creating an optimized production build ... 2.056 (node:41) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. 2.056 (Use node --trace-deprecation ... to show where the warning was created) 9.572 (node:91) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension. 9.572 (Use node --trace-warnings ... to show where the warning was created) 9.867 (node:91) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead. 16.42 ✓ Compiled successfully 16.42 Linting and checking validity of types ... 20.42 Failed to compile. 20.42 20.42 ./components/EmptyChat.tsx:15:22 20.42 Type error: Type '{ size: number; className: string; }' is not assignable to type 'IntrinsicAttributes & { className?: string | undefined; }'. 20.42 Property 'size' does not exist on type 'IntrinsicAttributes & { className?: string | undefined; }'. 20.42 20.42 13 | return ( 20.42 14 |

20.42 > 15 | 20.42 | ^ 20.42 16 | 20.42 17 |

20.42 18 |

20.46 error Command failed with exit code 1. 20.46 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`

I'm not sure how to fix this. Reinstall yarn or check for the updates doesn't work.

[world4jason]

same issue here

[cbp44]

Same error here. I am able to build it by first checking out v1.5.0, but v1.6.0 does not build.

# This works
git checkout v1.5.0
docker compose up -d

# This doesn't work
git checkout v1.6.0
docker compose up -d

[khatiwada-bishal]

Refer to #175 and can be resolved as below ThemeSwitcher.tsx and Navbar.tsx have an invalid size prop, editing them out to only use the class name prop resolves the issue

[thekingofkode]

Same issue here

[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;

[cchhenwei]

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;

Thanks, it solved the problem.

[ous-sama22]

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;

Thanks, it solved the problem.

Can you tell me where can I find these files to edit them please

[atgehrhardt]

@ous-sama22

/Perplexica/ui/components/EmptyChat.tsx /Perplexica/ui/components/theme/Switcher.tsx

[ous-sama22]

@ous-sama22

/Perplexica/ui/components/EmptyChat.tsx /Perplexica/ui/components/theme/Switcher.tsx

Thank you

[Ed-cred]

This should be resolved by the latest release.