CODEWITHSUNDEEP
node.jsgatsbynetlifycontentful
Victor Laforga
Victor Laforga

Reputation: 65

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

sinds a few days I am getting a building error with netlify. I am quite new to Gatbsy so I couldn't resolve it by my self. I hope you guys can help me out with this.

TypeError: Cannot destructure property 'createPage' of 'boundActionCreators' a s it is undefined.

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();
  });
};

This is the error when building netlify building error

Upvotes: 1

Views: 546

Answers (1)

Ferran Buireu
Ferran Buireu

Reputation: 29320

You are destructuring in the "old-fashioned" way. Change it to:

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();
  });
};

Just changing boundActionCreators by actions should do the trick in version 2 onwards, as you can see in Gatsby's docs.

Outside the scope of the question, in addition, in your gatsby-node.js you have:

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

/bad-module/ is the name of the folder inside node_modules which contains the offending module that breaks your compilation when some third-dependency module uses window (or other global objects) in the SSR. It's a regular expression, that's why is between slashes (/) and it should match some folder, otherwise, you can remove it.

Regarding the new issue, it has nothing to do with the previous workaround. The new issue is caused by an undefined property. If there's a possibility that your data comes undefined or null, add a condition like:

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

Upvotes: 1

Related Questions