Repository: LAION-AI/Open-Assistant
File: website/src/pages/_app.tsx (TypeScript)

Code before:
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
  env: typeof process.env;
  cookie: string;
};

const swrConfig: SWRConfiguration = {
  revalidateOnFocus: false,
  revalidateOnMount: true,
};

function MyApp({ Component, pageProps: { session, ...pageProps }, env, cookie }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? getDefaultLayout;
  const page = getLayout(<Component {...pageProps} />);
  const { t, i18n } = useTranslation();

  const direction = i18n.dir();
  useEffect(() => {
    document.body.dir = direction;
  }, [direction]);

  // expose env vars on the client
  if (typeof window !== "undefined") {
    for (const key in env) {
      process.env[key] = env[key];
    }
  }

  return (
    <>
      <Head>
        <meta name="description" key="description" content={t("index:description")} />
      </Head>
      <FlagsProvider value={flags}>
        <Chakra cookie={cookie}>
          <SWRConfig value={swrConfig}>
            <SessionProvider session={session}>{page}</SessionProvider>
          </SWRConfig>
        </Chakra>
      </FlagsProvider>
    </>
  );
}

MyApp.getInitialProps = ({ ctx: { req } }: AppContext) => {
  return {
    env: {
      INFERENCE_SERVER_HOST: process.env.INFERENCE_SERVER_HOST,
      ENABLE_CHAT: isChatEnabled(),
      ENABLE_EMAIL_SIGNIN: boolean(process.env.ENABLE_EMAIL_SIGNIN),
      ENABLE_EMAIL_SIGNIN_CAPTCHA: boolean(process.env.ENABLE_EMAIL_SIGNIN_CAPTCHA),

Review comment (suggestion):
could we maybe do it like this?
```ts
process.env = new Proxy(env, {
    get(env, key) {
        const value = env[key];
        if (!value) {
           throw new Error("Environment variable not set in _app.tsx")
        }
        return value;
    }
)
```

I think it is very easy to make this mistake, which is why we should log how to fix it..

I hope nothing else breaks, otherwise just `Object.assign(process.env, env)`


Code after:
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
  env: typeof process.env;
  cookie: string;
};

const swrConfig: SWRConfiguration = {
  revalidateOnFocus: false,
  revalidateOnMount: true,
};

function MyApp({ Component, pageProps: { session, ...pageProps }, env, cookie }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? getDefaultLayout;
  const page = getLayout(<Component {...pageProps} />);
  const { t, i18n } = useTranslation();

  const direction = i18n.dir();
  useEffect(() => {
    document.body.dir = direction;
  }, [direction]);

  // expose env vars on the client
  if (typeof window !== "undefined") {
    process.env = new Proxy(env, {
      get(env, key: string) {
        if (!(key in env)) {
          console.warn(`Environment variable ${key} not set in _app.tsx`);
        }
        return env[key];
      },
    });
  }

  return (
    <>
      <Head>
        <meta name="description" key="description" content={t("index:description")} />
      </Head>
      <FlagsProvider value={flags}>
        <Chakra cookie={cookie}>
          <SWRConfig value={swrConfig}>
            <SessionProvider session={session}>{page}</SessionProvider>
          </SWRConfig>
        </Chakra>
      </FlagsProvider>
    </>
  );
}

MyApp.getInitialProps = ({ ctx: { req } }: AppContext) => {
  return {