Unhandled Runtime Errors, Seo component in Gatsby

Question

I'm learning to make Seo component in Gatsby, I wrote this code copied this method from Gatsby starter, but I have a problem of showing this error with 3 Unhandled Runtime Errors?

this is My Seo code

import * as React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const Seo = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          name: `twitter:card`,
          content: `summary`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

another issue that also below snippet of this code is not reachable

    />
  )
}

Seo.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

Seo.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default Seo

here also my index.js where I tried to import Seo

import { graphql, Link } from "gatsby"
import React from "react"
import Layout from "../components/Layout"
import * as styles from "../styles/home.module.css"
import { StaticImage } from "gatsby-plugin-image"
import Seo from "../components/Seo"

export default function Home({ data }) {
  const siteTitle = data.site.siteMetadata.title
  const siteDescription = data.site.siteMetadata.description
  return (
    <Layout>
      <Seo title={siteTitle} description={siteDescription} />
      <section className={styles.header}>
        <div className={styles.content}>
          <h2>hello world!</h2>
          <h3>Let's turn some ideas into websites.</h3>
          <p>I'm a Freelancer Web Developer,</p>
          <p>
            Ready to help individual customers or small startups build their
            perfect Website.
          </p>
          <Link to="/projects" className={styles.btn}>
            My Projects
          </Link>
        </div>
        <div className={styles.img}>
          <StaticImage
            src="../images/header1.jpg"
            placeholder="blurred"
            layout="fullWidth"
            alt="Banner"
          />
        </div>
      </section>
    </Layout>
  )
}

export const HomeQuery = graphql`
  query HomeQuery {
    site {
      siteMetadata {
        title
        description
        social {
          twitter
        }
      }
    }
  }
`

here as well I imported Seo

import React from "react"
import { Link } from "gatsby"
import Seo from "../Seo"
import styled from "styled-components"
import icon from "../../images/svg/logo-icon.svg"

const LogoWrap = styled.div`
  display: flex;
  color: var(--alpha-color);
  align-items: center:
  text-align: left;
  letter-spacing: 1px;
  text-transform: uppercase;
  }

  img {
    display: inline;
    margin-right: 3px;
  }
`

const Logo = () => {
  const { title } = Seo()

  return (
    <LogoWrap as={Link} to="/">
      <img src={icon} alt={title} width="40" height="30"></img>
      {title}
    </LogoWrap>
  )
}

export default Logo

need help what I'm doing wrong!?

Answer 1

Well, it's quite self-explanatory. In the Seo component you are destructuring the props as description, lang, meta, and title respectively at:

const Seo = ({ description, lang, meta, title }) 

As is, all fields are inferred as mandatory so, the issue rises up because, in some of the uses of Seo, the description is null or undefined (check also the rest).

Check the pages where you are rendering the Seo component to check how the props are being drilled down. Ideally, it should be:

<Seo description={'Some description'} lang={'Some lang'} ... />

Note: this will differ depending on how the props are being passed.

You can bypass this by adding some default values in your destructuring like:

const Seo = ({ description = '', lang = '', meta=[], title='' }) 

Adding the default values will make your Seo component to take them if no one is passed via props, avoiding the code-breaking.