Gatsby x 构建时出现内容错误，gatsby-node.js 出现问题

Question

几天后，我在使用 netlify 时遇到了构建错误。 我对 Gatbsy 很陌生，所以我无法自己解决它。我希望你们能帮助我解决这个问题。

TypeError：无法解构“boundActionCreators”的属性“createPage”，因为它是未定义的。

Gatsby-node.js

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};

exports.createPages = async ({ graphql, boundActionCreators }) => {
  const path = require(`path`);
  const { createPage } = boundActionCreators;
  return new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulProduct {
          edges {
            node {
              id
              slug
              name
              introTitle
              description2title
              description1title
              category {
                name
                slug
              }
              introDescription {
                internal {
                  content
                }
              }
              image {
                file {
                  url
                }
              }
              images {
                id
                file {
                  url
                }
              }
              description1 {
                internal {
                  content
                }
              }
              description2 {
                internal {
                  content
                }
              }
              specs
              pdf {
                file {
                  url
                }
              }
            }
          }
        }
      }
    `).then((result) => {
      result.data.allContentfulProduct.edges.forEach(({ node }) => {
        createPage({
          path: `systems/producten/${node.slug}`,
          component: path.resolve(`./src/pages/systems/producten/product.js`),
          context: {
            slug: node.slug,
            product: node,
          },
        });
      });
      resolve();
    });
  }).catch((error) => {
    console.log(error);
    reject();
  });
};

这是构建时的错误

Answer 1

您正在以“老式”的方式进行解构。将其更改为：

exports.createPages = async ({ graphql, actions }) => {
  const path = require(`path`);
  const { createPage } = actions;

  return new Promise((resolve, reject) => {
    graphql(`
      {
        allContentfulProduct {
          edges {
            node {
              id
              slug
              name
              introTitle
              description2title
              description1title
              category {
                name
                slug
              }
              introDescription {
                internal {
                  content
                }
              }
              image {
                file {
                  url
                }
              }
              images {
                id
                file {
                  url
                }
              }
              description1 {
                internal {
                  content
                }
              }
              description2 {
                internal {
                  content
                }
              }
              specs
              pdf {
                file {
                  url
                }
              }
            }
          }
        }
      }
    `).then((result) => {
      result.data.allContentfulProduct.edges.forEach(({ node }) => {
        createPage({
          path: `systems/producten/${node.slug}`,
          component: path.resolve(`./src/pages/systems/producten/product.js`),
          context: {
            slug: node.slug,
            product: node,
          },
        });
      });
      resolve();
    });
  }).catch((error) => {
    console.log(error);
    reject();
  });
};

只需将 boundActionCreators 更改为 actions 就可以在版本 2 及以后的版本中实现这一点，正如您在 Gatsby's docs 中看到的那样。

---

在问题范围之外，此外，在您的gatsby-node.js 中，您还有：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === 'build-html') {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /bad-module/,
            use: loaders.null(),
          },
        ],
      },
    });
  }
};

/bad-module/ 是node_modules 内的文件夹的名称，其中包含有问题的模块，当某些第三依赖模块在 SSR 中使用 window（或其他全局对象）时，该模块会破坏您的编译。这是一个正则表达式，这就是为什么在斜杠之间（/），它应该匹配某个文件夹，否则，你可以删除它。

关于新问题，它与之前的解决方法无关。新问题是由未定义的属性引起的。如果您的数据有可能来自undefined 或null，请添加如下条件：

{category && <span>{category.name}</span>}