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

看到您的代码，它将正常工作。 createPage结构还可以。

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

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

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

   if(product === undefined) return null;

   ......

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

您还可以将console.log放置在显示“ allProducts”和“ product”变量的gatsby节点中，在构建过程中检查变量结构。

请您回答一下结果？

Answer 2

一个简单的解决方法是将pages文件夹重命名为模板（并在gatsby-node的路径中对其进行更改）

运行Gatsby开发命令，但gatsby构建出错

2 个答案: