CODEWITHSUNDEEP
reactjsgatsbyreact-props
Ashwin S
Ashwin S

Reputation: 1

WebpackError: TypeError: Cannot read property 'map' of undefined during Gatsby build

I'm building my personal portfolio using graphmcms and Gatsby. The project runs perfect in local environment. While running gatsby build it returns
error

Child Component .js (Component where error throws during build )

{
  props.images.map((el, idx) => {
    return (
      <div>
        <img src={el.url} alt="img" />
      </div>
    );
  });
}

Parent component.js

//Query
    
<StaticQuery
query={graphql`
{
  Project {
    images {
        url(transformation: {document: {output: {format: webp}}})
      }
    }
  `}

Child Component

<Child images= {home.images.url} />

Upvotes: 0

Views: 1310

Answers (1)

Ryan Le
Ryan Le

Reputation: 8412

You issue might be laying somewhere else which cause the props.images to be empty during the initial render

But you could try to check if it's existing first then render it:

{
  props?.images && props.images.map((el, idx) => {
    return (
      <div>
        <img src={el.url} alt="img" />
      </div>
    );
  });
}

Upvotes: 1

Related Questions