将 Gatsby 博客部署到 Netlify 时出错
Posted
技术标签:
【中文标题】将 Gatsby 博客部署到 Netlify 时出错【英文标题】:Got error when deploying Gatsby blog to Netlify 【发布时间】:2020-05-25 15:10:42 【问题描述】:我在 Netlify 上部署了我的 Gatsby 博客,但遇到了几个问题。
问题 - 当我运行“gatsby develop”时,即使有错误消息,我也可以看到博客文章。 - 但是,当我运行“gatsby build”时,错误会停止处理。 - 我成功部署并删除了“gatsby-node.js”中的内容。 - 我可以看到已部署的网页,但不知何故,通过 Contentful 管理的博客帖子不起作用。 - 如果我使用“gatsby-node.js”中的内容进行部署,它会失败并且不起作用。
观察 - 由于“gatsby-node.js”用于创建帖子,这会影响我的博客页面。 - 如果我保持原样,它会返回一条错误消息,说“TypeError:无法读取未定义的属性'替换'”。 - 相信这不是内容问题,因为我可以通过开发环境看到所有帖子。
预期结果 - 在网页上显示帖子。
如果您能分享解决问题的想法/想法,我们将不胜感激。
const config = require('./src/utils/siteConfig')
const path = require(`path`)
const createFilePath = require('gatsby-source-filesystem');
exports.onCreateNode = ( node, boundActionCreators, getNode ) =>
const createNodeField = boundActionCreators;
if (node.internal.type === `MarkdownRemark`)
const value = createFilePath( node, getNode );
createNodeField(
name: `slug`,
node,
value,
);
;
exports.createPages = ( graphql, actions ) =>
const createPage = actions
const loadPosts = new Promise((resolve, reject) =>
graphql(`
allContentfulPost(
sort: fields: [publishDate], order: DESC
limit: 10000
)
edges
node
slug
publishDate
`).then(result =>
const posts = result.data.allContentfulPost.edges
const postsPerFirstPage = config.postsPerHomePage
const postsPerPage = config.postsPerPage
const numPages = Math.ceil(
posts.slice(postsPerFirstPage).length / postsPerPage
)
// Create main home page
createPage(
path: `/`,
component: path.resolve(`./src/templates/index.js`),
context:
limit: postsPerFirstPage,
skip: 0,
numPages: numPages + 1,
currentPage: 1,
,
)
// Create additional pagination on home page if needed
Array.from( length: numPages ).forEach((_, i) =>
createPage(
path: `/$i + 2/`,
component: path.resolve(`./src/templates/index.js`),
context:
limit: postsPerPage,
skip: i * postsPerPage + postsPerFirstPage,
numPages: numPages + 1,
currentPage: i + 2,
,
)
)
// Create each individual post
posts.forEach((edge, i) =>
const prev = i === 0 ? null : posts[i - 1].node
const next = i === posts.length - 1 ? null : posts[i + 1].node
createPage(
path: `$edge.node.slug/`,
component: path.resolve(`./src/templates/post.js`),
context:
slug: edge.node.slug,
prev,
next,
,
)
)
resolve()
)
)
const loadTags = new Promise((resolve, reject) =>
graphql(`
allContentfulTag
edges
node
slug
post
id
`).then(result =>
const tags = result.data.allContentfulTag.edges
const postsPerPage = config.postsPerPage
// Create tag pages with pagination if needed
tags.map(( node ) =>
const totalPosts = node.post !== null ? node.post.length : 0
const numPages = Math.ceil(totalPosts / postsPerPage)
Array.from( length: numPages ).forEach((_, i) =>
createPage(
path:
i === 0 ? `/tag/$node.slug/` : `/tag/$node.slug/$i + 1/`,
component: path.resolve(`./src/templates/tag.js`),
context:
slug: node.slug,
limit: postsPerPage,
skip: i * postsPerPage,
numPages: numPages,
currentPage: i + 1,
,
)
)
)
resolve()
)
)
const loadPages = new Promise((resolve, reject) =>
graphql(`
allContentfulPage
edges
node
slug
`).then(result =>
const pages = result.data.allContentfulPage.edges
pages.map(( node ) =>
createPage(
path: `$node.slug/`,
component: path.resolve(`./src/templates/page.js`),
context:
slug: node.slug,
,
)
)
resolve()
)
)
return Promise.all([loadPosts, loadTags, loadPages])
error (node:91907) [DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
Starting to fetch data from Contentful
Fetching default locale
default locale is : en-US
contentTypes fetched 4
Updated entries 11
Deleted entries 0
Updated assets 23
Deleted assets 0
Fetch Contentful data: 165.880ms
error gatsby-node.js returned an error
TypeError: Cannot read property 'replace' of undefined
- utils.js:71 slash
[smy.jp]/[gatsby-source-filesystem]/utils.js:71:15
- create-file-path.js:40 module.exports
/[gatsby-source-filesystem]/create-file-path.js:40:61
- gatsby-node.js:10 Object.exports.onCreateNode
/gatsby-node.js:10:17
- api-runner-node.js:225 runAPI
/[gatsby]/dist/utils/api-runner-node.js:225:37
- api-runner-node.js:348 Promise.catch.decorateEvent.pluginName
/[gatsby]/dist/utils/api-runner-node.js:348:19
- debuggability.js:313 Promise._execute
/[bluebird]/js/release/debuggability.js:313:9
- promise.js:483 Promise._resolveFromExecutor
[smy.jp]/[bluebird]/js/release/promise.js:483:18
- promise.js:79 new Promise
/[bluebird]/js/release/promise.js:79:10
- api-runner-node.js:347
[smy.jp]/[gatsby]/dist/utils/api-runner-node.js:347:16
- util.js:16 tryCatcher
/[bluebird]/js/release/util.js:16:23
- reduce.js:155 Object.gotValue
/[bluebird]/js/release/reduce.js:155:18
- reduce.js:144 Object.gotAccum
/[bluebird]/js/release/reduce.js:144:25
- util.js:16 Object.tryCatcher
/[bluebird]/js/release/util.js:16:23
- promise.js:512 Promise._settlePromiseFromHandler
/[bluebird]/js/release/promise.js:512:31
- promise.js:569 Promise._settlePromise
/[bluebird]/js/release/promise.js:569:18
- promise.js:614 Promise._settlePromise0
/[bluebird]/js/release/promise.js:614:10
- promise.js:694 Promise._settlePromises
/[bluebird]/js/release/promise.js:694:18
- async.js:138 _drainQueueStep
/[bluebird]/js/release/async.js:138:12
- async.js:131 _drainQueue
/[bluebird]/js/release/async.js:131:9
- async.js:147 Async._drainQueues
/[bluebird]/js/release/async.js:147:5
- async.js:17 Immediate.Async.drainQueues [as _onImmediate]
/[bluebird]/js/release/async.js:17:14
- timers.js:439 processImmediate
internal/timers.js:439:21
【问题讨论】:
【参考方案1】:外人很难调试您的代码。
我建议删除代码:
从 gatsby-node.js 中删除所有代码 将代码添加到您的gatsby-node.js
并构建您的项目,直到遇到错误。
这很耗时,但可能是必要的。那么至少你知道罪魁祸首是什么。
- utils.js:71 slash
[smy.jp]/[gatsby-source-filesystem]/utils.js:71:15
- create-file-path.js:40 module.exports
/[gatsby-source-filesystem]/create-file-path.js:40:61
提示您的gatsby-config.js
也可能有问题。仔细检查您的 gatsby-source-filesystem 插件。
【讨论】:
以上是关于将 Gatsby 博客部署到 Netlify 时出错的主要内容,如果未能解决你的问题,请参考以下文章
卡在构建 gatsby-starter-netlify-cms
部署在 Netlify 上的 Gatsby 站点未更新来自 graphcms 的数据
在 Netlify 上部署 gatsby 站点时响应错误的大小图像
使用 gatsby 解决 netlify 上的 firebase 身份验证(谷歌登录)部署错误
在 Netlify 上部署会引发我的 GraphQL/Gatsby/Contentful 查询错误,需要不必要的查询参数