'TypeError: Cannot read properties of undefined (reading 'site')

Hello, I got this error, I tried a lot of things but I don't know how to solve it. Could it be a library or do I need to do something else?

Here you have the error and the code where I found it.

> error - components/Layout.tsx (31:4) @ Layout
>     TypeError: Cannot read properties of undefined (reading 'site')
>       29 | 
>       30 |   const { name, url, title, description, socialPreview } =
>     > 31 |     publicRuntimeConfig.site;
>          |    ^
>       32 | 
>       33 |   const meta = {
>       34 |     name,

Layout.tsx (It is a component, I have the same structure in another website I'm working on, but I have no errors in that one)

import { setConfig } from 'next/config'
import { publicRuntimeConfig } from '../next.config';
import getConfig from 'next/config';
import Head from 'next/head';
import { useRouter } from 'next/router';

setConfig({ publicRuntimeConfig })

type LayoutProps = {
  title?: string;
  description?: string;
  date?: string;
  socialPreview?: string;
  children: React.ReactNode;
};

const Layout = ({ children, ...customMeta }: LayoutProps) => {
  const router = useRouter();
  const { asPath } = router;

  const { name, url, title, description, socialPreview } =
    publicRuntimeConfig.site;

  const meta = {
    name,
    url,
    title,
    description,
    socialPreview,
    ...customMeta,
  };

  return (
    <>
      <Head>
        <link rel="icon" href="/images/fev.svg" key="favicon" />
        <link rel="canonical" href={`${url}${asPath}`} key="canonical" />

        {/* Twitter */}
        <meta
          name="twitter:card"
          content="summary_large_image"
          key="twitter_card"
        />
        <meta name="twitter:title" content={meta.title} key="twitter_title" />
        <meta
          name="twitter:description"
          content={meta.description}
          key="twitter_description"
        />
        <meta
          name="twitter:image"
          content={`${url}${socialPreview}`}
          key="twitter_image"
        />

        {/* Open Graph */}
        <meta property="og:url" content={`${url}${asPath}`} key="og_url" />
        <meta property="og:site_name" content={meta.name} key="og_site_name" />
        <meta property="og:title" content={meta.title} key="og_title" />
        <meta
          property="og:description"
          content={meta.description}
          key="og_description"
        />
        <meta
          property="og:image"
          content={`${url}${socialPreview}`}
          key="og_image"
        />
        <meta property="og:image:width" content={`1200`} key="og_image_width" />
        <meta
          property="og:image:height"
          content={`630`}
          key="og_image_height"
        />

        <meta name="description" content={meta.description} key="description" />
        {meta.date && (
          <meta property="article:published_time" content={meta.date} />
        )}
        <title key="title">{meta.title}</title>
      </Head>
      <main>{children}</main>
    </>
  );
};

export default Layout;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'TypeError: Cannot read properties of undefined (reading 'site')

Sources

Related Questions