将 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 查询错误,需要不必要的查询参数

Netlift 构建:gatsby-source-prismic - 无效的插件选项 | Netlify 中的环境变量