每次更改博客條目時，`gatsby develop` 都會崩潰

Question

使用靈活的 Gatsby 啟動器 ( https://github.com/wangonya/flexible-gatsby/ )，Gatsby 依賴項的確切版本是：

    "gatsby": "2.15.36",
    "gatsby-image": "2.2.27",
    "gatsby-plugin-feed": "2.3.15",
    "gatsby-plugin-google-analytics": "2.1.20",
    "gatsby-plugin-manifest": "2.2.20",
    "gatsby-plugin-offline": "3.0.12",
    "gatsby-plugin-react-helmet": "3.1.10",
    "gatsby-plugin-sass": "2.1.17",
    "gatsby-plugin-sharp": "2.2.28",
    "gatsby-remark-images": "3.1.25",
    "gatsby-remark-prismjs": "3.3.17",
    "gatsby-source-filesystem": "2.1.30",
    "gatsby-transformer-remark": "2.6.27",
    "gatsby-transformer-sharp": "2.2.20",

我可以運行gatsby develop來監視文件夾中刷新 UI 更改等的文件。 但是，一旦我保存對content/blog開發中任何文件的任何更改，就會遇到以下錯誤：

info added file at /Users/mattsi/dev/me/newsite/gatsby/content/blog/conference-on-javascript/index.md

 ERROR #11321  PLUGIN

"gatsby-node.js" threw an error while running the createPages lifecycle:

The "path" argument must be of type string. Received type undefined

GraphQL request:14:17
13 |                 title
14 |                 img {
   |                 ^
15 |                   childImageSharp {

之后，本地服務器以錯誤頁面響應TypeError: Cannot read property 'page' of undefined和指向rootjs:44的堆棧跟蹤。 如果我殺死手表並再次gatsby develop ，它工作正常。 但是這個反饋循環顯然要慢得多。

我的 Gatsby 配置（用...省略了一些細節）：

module.exports = {
  siteMetadata: {
    title: `...`,
    description: `...`,
    author: `...`,
    siteUrl: `...`,
    social: {
      twitter: `...`,
      facebook: ``,
      github: `...`,
      linkedin: `...`,
      email: `...`,
    },
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 970,
            },
          },
          `gatsby-remark-prismjs`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        //trackingId: `ADD YOUR TRACKING ID HERE`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `...`,
        short_name: `...`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `./static/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    // `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-sass`,
  ],
}

我的gatsby-node.js文件：

const path = require(`path`)
const { createFilePath } = require(`gatsby-source-filesystem`)

exports.createPages = ({ graphql, actions }) => {
  const { createPage } = actions

  const blogPost = path.resolve(`./src/templates/blog-post.js`)
  return graphql(
    `
      {
        allMarkdownRemark(
          sort: { fields: [frontmatter___date], order: DESC }
          limit: 1000
        ) {
          edges {
            node {
              fields {
                slug
              }
              frontmatter {
                title
                img {
                  childImageSharp {
                    fluid(maxWidth: 3720) {
                      aspectRatio
                      base64
                      sizes
                      src
                      srcSet
                    }
                  }
                }
              }
            }
          }
        }
      }
    `
  ).then(result => {
    if (result.errors) {
      throw result.errors
    }

    // Create blog posts pages.
    const posts = result.data.allMarkdownRemark.edges

    posts.forEach((post, index) => {
      const previous = index === posts.length - 1 ? null : posts[index + 1].node
      const next = index === 0 ? null : posts[index - 1].node

      createPage({
        path: post.node.fields.slug,
        component: blogPost,
        context: {
          slug: post.node.fields.slug,
          previous,
          next,
        },
      })
    })

    // Create blog post list pages
    const postsPerPage = 10
    const numPages = Math.ceil(posts.length / postsPerPage)

    Array.from({ length: numPages }).forEach((_, i) => {
      createPage({
        path: i === 0 ? `/` : `/${i + 1}`,
        component: path.resolve("./src/templates/blog-list.js"),
        context: {
          limit: postsPerPage,
          skip: i * postsPerPage,
          numPages,
          currentPage: i + 1,
        },
      })
    })
  })
}

exports.onCreateNode = ({ node, actions, getNode }) => {
  const { createNodeField } = actions

  if (node.internal.type === `MarkdownRemark`) {
    const value = createFilePath({ node, getNode })
    createNodeField({
      name: `slug`,
      node,
      value,
    })
  }
}

查看堆棧跟蹤，似乎來自allMarkdownRemark GraphQL DB 的已修改帖子上的post.node.fields.slug字段以undefined的形式返回。 但是使用內置的 GraphQL 瀏覽器似乎總是被填充。 也許它在刷新時非常短暫地無人居住，比我能捕捉到的快，這會導致手表崩潰？ 有什么想法可以修復 Gatsby 的手表功能嗎？

Answer 1

我也有這個問題，我相信這個 PR會解決這個問題——至少對我來說是這樣。 如果對您有幫助，也許您可以對其進行測試並評論 PR。