Imporove propTypes for code readability inside render-page.js - Warning: Failed prop type: The prop alt is marked as required in MainImage, but its value is undefined.

[santhoshnumberone]

Description

I just updated my gatsby to 3.1.0

Would appreciate if anyone could point out how i could resolve this issue.

Gatsby develop runs fine doesn't popup any warning or error, I even get localhost port.

File pointed by the WARNING is page-render.js inside public directory

As soon as I run the local host on my firefox

I get these WARNINGS

Warning: Failed prop type: The prop altis marked as required inMainImage, but its value is undefined.

Warning: Failed prop type: The prop altis marked as required inT, but its value is undefined.

This is my header.js file from where the WARNINGS are being generated

import React from "react"
import styled from 'styled-components'

import { GatsbyImage } from 'gatsby-plugin-image'
import { graphql,  useStaticQuery } from 'gatsby'

const Header = () => {
  const data = useStaticQuery(graphql`
    fragment servicesImage on File {
      childImageSharp {
        gatsbyImageData(layout: CONSTRAINED)
      }
    }
    query {
      image1: file(relativePath: { eq: "LOGO.png" }) {
        ...servicesImage
      }
    }
  `)
  return (
    <CompanyNameHeader>
              <CompanyLogo image={data.image1.childImageSharp.gatsbyImageData}/>
    </CompanyNameHeader>
  )

}
export default Header

const CompanyLogo = styled(GatsbyImage)`properties...`
const CompanyNameHeader = styled.div`properties...`

Here's the layout of my webpage for better understanding

I went through this blog 4 Things I Wish I Had Known Before Writing my First React App fourth point specifies why these warning come up

4) propTypes for code readability When looking at a component, it isn’t readily apparent what properties that component is expecting to receive in order to run properly. When writing my first React App, I batted down property errors galore. You could add comments to indicate which properties are required, but listing expected properties using React.PropTypes will provide the same clarity while also reducing the possibility of errors by adding type checking. For example, if your top navigation bar is expecting a user name and a photo, you could write: static propTypes = {name: React.PropTypes.string.isRequired} Then if you run this component without the required properties, you will see an error in the console: Warning: Failed prop type: The prop 'name' is marked as required in 'Nav', but its value is 'undefined'. So, while totally optional, propTypes are an easy way to improve code readability and maintainability.

Here's the complete warning

Warning: Failed prop type: The prop `alt` is marked as required in `MainImage`, but its value is `undefined`.
    at MainImage
    at P (/home/ffffff/Website/newwebdesign1/public/render-page.js:6591:13)
    at header__CompanyLogo (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at div
    at header__CompanyNameHeader (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at Header
    at div
    at layout__Webtemplate (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at Layout (/home/ffffff/Website/newwebdesign1/public/render-page.js:7460:3)
    at IndexPage
    at RouteHandler (/home/ffffff/Website/newwebdesign1/public/render-page.js:26354:5)
    at div
    at FocusHandlerImpl (/home/ffffff/Website/newwebdesign1/public/render-page.js:8227:5)
    at FocusHandler (/home/ffffff/Website/newwebdesign1/public/render-page.js:8198:19)
    at RouterImpl (/home/ffffff/Website/newwebdesign1/public/render-page.js:8103:5)
    at Location (/home/ffffff/Website/newwebdesign1/public/render-page.js:7932:23)
    at Router
    at ServerLocation (/home/ffffff/Website/newwebdesign1/public/render-page.js:8040:19)
    at me (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:12760)
Warning: Failed prop type: The prop `alt` is marked as required in `T`, but its value is `undefined`.
    at T (/home/ffffff/Website/newwebdesign1/public/render-page.js:6443:13)
    at Picture (/home/ffffff/Website/newwebdesign1/public/render-page.js:6463:13)
    at MainImage
    at q (/home/ffffff/Website/newwebdesign1/public/render-page.js:6553:13)
    at div
    at G (/home/ffffff/Website/newwebdesign1/public/render-page.js:6584:13)
    at P (/home/ffffff/Website/newwebdesign1/public/render-page.js:6591:13)
    at header__CompanyLogo (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at div
    at header__CompanyNameHeader (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at Header
    at div
    at layout__Webtemplate (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:19303)
    at Layout (/home/ffffff/Website/newwebdesign1/public/render-page.js:7460:3)
    at IndexPage
    at RouteHandler (/home/ffffff/Website/newwebdesign1/public/render-page.js:26354:5)
    at div
    at FocusHandlerImpl (/home/ffffff/Website/newwebdesign1/public/render-page.js:8227:5)
    at FocusHandler (/home/ffffff/Website/newwebdesign1/public/render-page.js:8198:19)
    at RouterImpl (/home/ffffff/Website/newwebdesign1/public/render-page.js:8103:5)
    at Location (/home/ffffff/Website/newwebdesign1/public/render-page.js:7932:23)
    at Router
    at ServerLocation (/home/ffffff/Website/newwebdesign1/public/render-page.js:8040:19)
    at me (/home/ffffff/Website/newwebdesign1/public/render-page.js:25933:12760)

Environment

gatsby info --clipboard output from inside my project directory

System:
    OS: Linux 5.4 Ubuntu 20.04.2 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 12.21.0 - /usr/bin/node
    Yarn: 1.22.5 - /usr/bin/yarn
    npm: 7.6.3 - /usr/bin/npm
  Languages:
    Python: 2.7.18 - /usr/bin/python
  Browsers:
    Firefox: 86.0
  npmPackages:
    gatsby: ^3.0.1 => 3.0.1
    gatsby-plugin-ffmpeg: ^0.3.1 => 0.3.1
    gatsby-plugin-gatsby-cloud: ^2.0.0 => 2.0.0
    gatsby-plugin-google-analytics: ^3.1.0 => 3.1.0
    gatsby-plugin-image: ^1.1.1 => 1.1.1
    gatsby-plugin-layout: ^2.1.0 => 2.1.0
    gatsby-plugin-manifest: ^3.0.0 => 3.0.0
    gatsby-plugin-nprogress: ^3.1.0 => 3.1.0
    gatsby-plugin-offline: ^4.0.0 => 4.0.0
    gatsby-plugin-react-helmet: ^4.0.0 => 4.0.0
    gatsby-plugin-sharp: ^3.1.1 => 3.1.1
    gatsby-plugin-styled-components: ^4.1.0 => 4.1.0
    gatsby-plugin-web-font-loader: ^1.0.4 => 1.0.4
    gatsby-source-filesystem: ^3.1.0 => 3.1.0
    gatsby-transformer-json: ^3.1.0 => 3.1.0
    gatsby-transformer-sharp: ^3.1.0 => 3.1.0
  npmGlobalPackages:
    gatsby-cli: 3.1.0

[LekoArts]

Your <CompanyLogo /> needs an alt tag