我有一个非常简单的Gatsby应用程序。我正在运行gatsby development,它工作正常,但是运行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
gatsby-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,
},
})
})
}
您ProductTemplate
在/pages
文件夹中(应该在中/templates
)。这导致Gatsby尝试自动为该目录中的每个文件创建页面。在自动执行的情况下,它没有任何上下文,因此构建失败。这仅当您运行情况gatsby build
,因为在gatsby develop
没有SSR(小号erver-小号IDE [R endering)。
createPage
API旨在基于段,路径或另一个唯一的标识符字段创建动态页面,而不是用于已知页面(如/pages
文件夹内的页面)的动态页面。
为了解决这个问题,只需将您的product.js
来/templates
和更改此:
component: path.resolve(`./src/pages/product.js`),
对此:
component: path.resolve(`./src/templates/product.js`),
这是因为您要为每个产品而不是页面创建模板(例如Gatsby可以理解页面)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句