盖茨比开发作品但不是建立在同一个项目上

Question

我有一个非常简单的 Gatsby 应用程序。我正在运行ning gatsby develop on that并且它工作正常但是当我运行 gatsby build时我收到一个错误。我不确定为什么开发会工作而构建不会。不确定我错过了什么！

import React from "react"

import Layout from "./layout"

const ProductTemplate = ({ pageContext }) => {
const { product } = pageContext
return (
  <Layout>
    <h1>{product.title}</h1>
    <div>{product.description}</div>

  </Layout>
  )
}

export default ProductTemplate

这是准确的错误

   8 |   return (
   9 |     <Layout>
> 10 |       <h1>{product.title}</h1>
     |                    ^
  11 |       <div>{product.description}</div>
  12 | 


  WebpackError: TypeError: Cannot read property 'title' of undefined

  - product.js:10 
  src/pages/product.js:10:20

盖茨比-node.js

const path = require(`path`)
exports.createPages = async ({ graphql, actions }) => {
const { createPage } = actions
// Query for all products in Shopify
const result = await graphql(`
  query {
    allShopifyProduct(sort: { fields: [title] }) {
      edges {
        node {
          title
          shopifyId
          handle
          description
          availableForSale
          priceRange {
            maxVariantPrice {
              amount
            }
            minVariantPrice {
              amount
            }
          }
        }
      }
    }
  }
`)
// Iterate over all products and create a new page using a template
// The product "handle" is generated automatically by Shopify
result.data.allShopifyProduct.edges.forEach(({ node }) => {
  createPage({
    path: `/product/${node.handle}`,
    component: path.resolve(`./src/pages/product.js`),
    context: {
      product: node,
    },
  })
})
}

Answer 1

您的 ProductTemplate 是 inside /pages 文件夹（它应该在 /templates 中）。这导致 Gatsby 尝试自动为该目录中的每个文件创建页面。在它自动执行的情况下，它不会获得任何上下文，因此构建失败。这只会在你运行 gatsby build 时发生，因为在 gatsby develop 期间没有 SSR (Server-Side R渲染).

createPage API 旨在基于 slug、路径或另一个独特的 identifier 字段创建动态页面，而不是针对已知页面，例如 inside /pages 文件夹。

要修复它，只需将您的 product.js 移动到 /templates 并更改为：

component: path.resolve(`./src/pages/product.js`),

为此：

component: path.resolve(`./src/templates/product.js`),

这是因为您要为每个产品创建模板，而不是页面（就像 Gatsby 理解页面一样）。

Here's a GitHub thread 如果您想遵循完整的解释，则正是您的问题。

盖茨比开发作品但不是建立在同一个项目上

gatsby develop works but not build on same project

production

build

node.js

graphql

gatsby