Команда разработки Gatsby выполняется, но сборка Gatsby дает ошибку

Question

Я динамически создаю страницы с помощью файла gatsby-node.js

let allProducts = result.data.allProducts.edges
    createPage({
        path: `/products`,
        component: require.resolve('./src/pages/products.js'),
        context: { allProducts }
    });

  //Create a page for each Product.
  allProducts.map((edge)=>{
    let product = edge.node
    createPage({
      path:`/product/${product.id}`,
      component: require.resolve('./src/pages/product.js'),
      context:{product}
    })
  })

Разработка Gatsby работает нормально, но при сборке gatsby выдает ошибку

Ошибка Создание статического HTML для страницошибка

См. нашу страницу документации по отладке сборок HTML, чтобы получить справку https://gatsby.app/debug-html

  43 |         <div >
  44 |             <Img fluid={data.bannerHeaderProduct.childImageSharp.fluid}/>
> 45 |             <img src={product.imgSrc }alt=""/>
     |                               ^
  46 |         </div>
  47 |         <div>
  48 |             <h3 dangerouslySetInnerHTML={{__html:product.name}}>

WebpackError: TypeError: Невозможно прочитать свойство 'imgSrc' из неопределенного

продукта, который яя передаю как контекст для страниц становится неопределенным

Answer 1

Простое решение - переименовать папку страниц в шаблоны (а также изменить ее в путях в gatsby-node)

Answer 2

Видя ваш код, он будет работать нормально.структура createPage в порядке.

По моему опыту, иногда генератор ошибок gatsby / graphql не показывает правильную строку ошибки, если имеется много переменных с одинаковым именем (imgSrc), генератор ошибок gatsby показывает первыйодна появившаяся переменная, а не неправильная.

Чтобы подтвердить, что вы должны поставить «if» перед возвратом, проверьте, не определен ли продукт.Это хороший способ предотвратить ошибки рендеринга во время сборок:

render(){
   const {product} = this.props.pathContext;

   if(product === undefined) return null;

   ......

   return <div>....</div>;
}

Вы также можете поместить console.log в узел gatsby, показывающий переменные "allProducts" и "product", проверяя структуру переменных во времяbuild.

Не могли бы вы ответить с результатами?