Как я могу решить проблему неопределенного параметра в среде сборки gatsby?

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

Привет.

Я решил проблему неопределенности в таких местах, как фильтр и карта. Кстати, мне интересно, как можно решить undefined, когда речь идет о параметрах.

Мы проверили, что общедоступный URL-адрес существует по адресу 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>
  )
}

На всякий случай оставляю адрес гитхаба. https://github.com/urther/пример

Спасибо.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
0
0
11
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если миниатюра не определена, publicURL выдаст ошибку, поскольку вы пытаетесь получить доступ к значению из неопределенного параметра. Не разрушайте миниатюру в самом параметре, только передайте миниатюру и делайте это внутри функции.

const { publicURL } = {...thumbnail}

Другие вопросы по теме