How can I solve the parameter undefined problem in a gatsby build environment?-CodePudding

Building static HTML failed for path "/main/postItem/"

 

See our docs page for more info on this error: https://gatsby.dev/debug-html

 

 

  19 |   categories,

  20 |   summary,

> 21 |   thumbnail: { publicURL },

     |                ^

  22 |   link,

  23 | }) => {

  24 |   return (

 

 

  WebpackError: TypeError: Cannot read properties of undefined (reading 'publicURL')

  

  - postItem.tsx:21 

    gatsby-starter-default/src/pages/main/postItem.tsx:21:16

  

  - inheritsLoose.js:5 

    [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:5:1

  

  - emotion-is-prop-valid.esm.js:15 

    [gatsby-starter-default]/[@emotion]/is-prop-valid/dist/emotion-is-prop-valid.esm.js:15:1

  

  - inheritsLoose.js:7 

    [gatsby-starter-default]/[@babel]/runtime/helpers/inheritsLoose.js:7:1

  

  - static-entry.js:294 

    gatsby-starter-default/.cache/static-entry.js:294:22

  

  - history.js:49 

    [gatsby-starter-default]/[@gatsbyjs]/reach-router/es/lib/history.js:49:6

Hello.

I solved the problem of undefined in places like filter and map. By the way, I wonder how undefined can be solved when it comes to parameters.

We have verified that publicURL exists at http://localhost:8000/__graphql.

import React, { FunctionComponent } from 'react'
import styled from '@emotion/styled'
import { Link } from 'gatsby'

type PostItemProps = {
  title: string
  date: string
  categories: string[]
  summary: string
  thumbnail: {
    publicURL?: string
  }
  link: string
}

const PostItem: FunctionComponent<PostItemProps> = ({
  title,
  date,
  categories,
  summary,
  thumbnail: { publicURL },
  link,
}) => {
  return (
    <PostItemWrapper to={link}>
      <Thumbnail>
        {publicURL ? <img src={publicURL} alt="이미지" /> : <></>}
      </Thumbnail>
      <InfoWrapper>
        <Title>{title}</Title>
        <Date>{date}</Date>
        {categories?.map(category => (
          <CategoryItem key={category}>{category}</CategoryItem>
        ))}
        <Summary>{summary}</Summary>
      </InfoWrapper>
    </PostItemWrapper>
  )
}

I'm leaving the github address just in case. https://github.com/urther/example

Thank you.

CodePudding user response：

If thumbnail is undefined, publicURL would throw an error as you are trying to access a value from undefined param. Dont destructure thumbnail in param itself, only pass thumbnail and inside a function do this.

const { publicURL } = {...thumbnail}