Build works locally but not on netlify

Support
, , ,
1

I need advice to debug my deploy. For some reason, it is giving me a build error and I don’t see the reasoning.

My repo is here GitHub - JacobDFrank/jacobdfrank: Portfolio Website

Much appreciated for reaching out!

2

hey waffles :waffle:,

That’s an unusual error and one we don’t see very often. :thinking: i would, in your situation, try clearing the deploy cache and retrying the deploy and see if that helps.

if it doesn’t, let us know, and i’ll try and find out more about what might be going on here.

3

Hi Perry :parrot:,

I cleared the cache and the same errors occurred? Any idea what’s happening here? My only idea is that it’s an issue with the package.json and maybe I some modules aren’t working right with eachother given their versions and the build on Netlify but I’m not sure that’d make sense.

4

Hey @Waffles211

Your site is not built correctly.

There was an error in your GraphQL query:
Variable "$URLpath" of non-null type "String!" must not be null.

So you have to write URLpath variables as a “String” in frontmatter.

You should create a Slug for each unique files. So if the URLpath is null or empty, gatsby-node.js will generate slugs for page URL via file name.
Check this out: Creating Slugs for Pages | Gatsby

And you shouldn’t camel case or space for that URLpathes!
for example:
wrong: URLpath: ‘/Hawkes Media’
true: URLpath: ‘/hawkes-media’

By the way, I saw the GC on your latest deploy log on Netlify. Which means overload for JS files for “console.log” or something. And there are many “console.log” in your custom static/JS files.
I don’t know if these affect the deploy progress.

5

And here is the other thing, your GraphQL query is not filtered well with RegEX on gatsby-node.js.

So URLpath expected for other markdowns.

You can filtered with sourceInstanceName,

Example:

{
  allFile(filter: {sourceInstanceName: {eq: "projects"}}) {
    edges {
      node {
        id
        childMarkdownRemark {
          frontmatter {
            title
            URLpath
            published
            date
            description
            tags
          }
        }
      }
    }
  }
}
6

Thanks for the tips, I made the changes you recommended and those resulted in the same fail so I don’t think they’re the issue.

7

Actually you are getting GraphQL error, again on your Netlify. You should add the childMarkdownRemark to each node.

Your gatsby-node.js should look like this, exactly:

   const path = require('path');
   exports.createPages = ({
     graphql,
     actions
   }) => {
     const {
       createPage
     } = actions;
     return new Promise((resolve) => {
       graphql(`
         {
           allFile(filter: {sourceInstanceName: {eq: "projects"}}) {
             edges {
               node {
                 childMarkdownRemark {
                   html
                   frontmatter {
                     title
                     URLpath
                     published
                     date
                     description
                     tags
                   }
                 }
               }
             }
           }
         }
       `).then(results => {
         results.data.allFile.edges.forEach(({
           node
         }) => {
           createPage({
             path: `/projects${node.childMarkdownRemark.frontmatter.URLpath}`,
             component: path.resolve('./src/components/ProjectLayout.jsx'),
             context: {
               URLpath: node.childMarkdownRemark.frontmatter.URLpath
             }
           });
         });
         resolve();
       });
     });
   };
1 Like