构建时 Gatsby x contentful 错误，gatsby 问题-node.js

Question

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

TypeError: 无法解构 'boundActionCreators' 的属性 'createPage'，因为它未定义。

盖茨比-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 内文件夹的名称，其中包含有问题的模块，当某些第三方依赖模块在其中使用 window（或其他全局对象）时会破坏您的编译固态继电器。这是一个正则表达式，这就是为什么在斜杠之间（/）并且它应该匹配某个文件夹，否则，你可以删除它。

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

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

构建时 Gatsby x contentful 错误，gatsby 问题-node.js

Gatsby x contentful error when building, problems with gatsby-node.js

node.js

contentful

gatsby

netlify