盖茨比开发命令运行，但盖茨比构建错误

我正在使用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开发运行良好，但是当我做盖茨比构建它时会出错

错误为页面构建静态HTML失败

有关帮助/debug-html的调试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”

我作为上下文传递给页面的产品未定义

看到你的代码，它会工作正常。 createPage结构没问题。

根据我的经验，有时gatsby / graphql错误发射器没有显示正确的错误行，如果有很多变量具有相同的名称（imgSrc）gatsby错误发射器显示第一个出现变量，而不是错误的变量。

要确认在返回渲染之前应该放置“if”，检查产品是否未定义。这是在构建期间防止渲染错误的好方法：

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

   if(product === undefined) return null;

   ......

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

您还可以在gatsby-node中显示一个console.log，显示“allProducts”和“product”变量，在构建期间检查变量结构。

你能回复一下结果吗？