Gatsby: Error when deploying on Gatsby Cloud and/or Netlify

[afucher]

Description

I'm getting this error when trying to deploy this site on Netlify or Gatsby Cloud:
```8:59:24 PM: failed Building static HTML for pages - 1.687s
8:59:24 PM: error Building static HTML failed for path "/cursos/int2/"
8:59:24 PM: 15 | return (
8:59:24 PM: 16 |
8:59:24 PM: > 17 |
8:59:24 PM: | ^
8:59:24 PM: 18 |

{this.props.data.cursosJson.nome}

8:59:24 PM: 19 |

{this.props.data.cursosJson.descricao}

8:59:24 PM: 20 |
8:59:24 PM:
8:59:24 PM: WebpackError: TypeError: Cannot read property 'nome' of null
8:59:24 PM:
8:59:24 PM: - curso.js:17 CursoTemplate.render
8:59:24 PM: src/templates/curso.js:17:52

### Steps to reproduce

I've tried to reproduce it locally (in 2 machines, deleting caches also) but locally it works (build and develop). 
Just occurs when trying to deploy do Netlify or Gatsby Cloud.

### Expected result

The site should build and deploy.

### Actual result

I got the error that I posted.

### Environment

System:
OS: macOS 10.15.1
CPU: (4) x64 Intel(R) Core(TM) i5-5257U CPU @ 2.70GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 12.13.0 - ~/.nvm/versions/node/v12.13.0/bin/node
npm: 6.12.0 - ~/.nvm/versions/node/v12.13.0/bin/npm
Languages:
Python: 2.7.16 - /usr/bin/python
Browsers:
Chrome: 80.0.3987.122
Firefox: 73.0.1
Safari: 13.0.3
npmPackages:
gatsby: ^2.19.27 => 2.19.27
gatsby-image: ^2.2.41 => 2.2.41
gatsby-plugin-manifest: ^2.2.42 => 2.2.42
gatsby-plugin-offline: ^3.0.35 => 3.0.35
gatsby-plugin-react-helmet: ^3.1.22 => 3.1.22
gatsby-plugin-sharp: ^2.4.5 => 2.4.5
gatsby-plugin-typescript: ^2.1.27 => 2.1.27
gatsby-source-filesystem: ^2.1.48 => 2.1.48
gatsby-transformer-json: ^2.2.26 => 2.2.26
gatsby-transformer-sharp: ^2.3.16 => 2.3.16
npmGlobalPackages:
gatsby-cli: 2.8.2
```

[afucher]

I've added some console logs to get more information on netlify build console. It seems that it is not able to find by id my second data on graphQL

8:59:22 PM: success run queries - 19.572s - 9/9 0.46/s
8:59:24 PM: { cursosJson:
8:59:24 PM:    { nome: 'Interpretação I', descricao: 'Curso de interpretação' } }
8:59:24 PM: { cursosJson: null }

The first one returns data, but the second one no. But both files are there, and locally the build works.

Query to return data on template: https://github.com/astroregulus/regulus-site/blob/master/src/templates/curso.js#L27
Files: https://github.com/astroregulus/regulus-site/tree/master/src/data/cursos

[jonniebigodes]

@afucher do you mind if i take a look at it? I'll clone the repo tomorrow and possibly provide you with a solution. Do you mind waiting a bit?

[afucher]

Just to add more information, on Netlify it works and failed for the same commit:

[jonniebigodes]

@afucher sorry for the delay, but i was just waiting for a build to go through. I've checked your repo and i have a solution for you.

Your particular issue is a multi pronged one and took a bit of changes. Going to detail a bit more the steps i took to solve this.

• Forked your repo.
• Cloned it locally.
• Installed the dependencies.
• I checked the code while a production build was being created with yarn build && yarn serve and one thing in your interpretacao1.json and interpretacao2.json struck me as familar, more spefically #20703 . With that in mind i immediately changed the id key to curso_id in those files.
  You might be wondering why this. The simplest reason is that leaving it as id was triggering some inconsistencies in data generation. Below i'm going to leave the results of 3 builds i was creating, before applying this change:

Run 1:

$ gatsby build
success open and validate gatsby-configs - 0.081s
success load plugins - 2.225s
success onPreInit - 0.006s
success delete html and css files from previous builds - 0.038s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's no stale data.
success initialize cache - 0.074s
success copy gatsby files - 1.321s
success onPreBootstrap - 0.071s
success createSchemaCustomization - 0.025s
success source and transform nodes - 0.157s
success building schema - 0.597s
{
  "node": {
    "id": "int1",
    "descricao": "Curso de interpretação",
    "nome": "Interpretação I"
  }
}
Interpretação I
{
  "node": {
    "id": "int2",
    "descricao": "Curso de aperfeiçoamento em interpretação de mapas natais. São ensinadas técnicas e abordagens mais específicas, ampliando e aprofundando as possibilidades de interpretação do mapa natal.",
    "nome": "Interpretação II"
  }
}
Interpretação II
success createPages - 0.140s
success createPagesStatefully - 0.194s
success onPreExtractQueries - 0.006s
success update schema - 0.084s
success extract queries from components - 0.611s
success write out requires - 0.021s
success write out redirect data - 0.012s
success Build manifest and related icons - 0.013s
success onPostBootstrap - 0.030s
⠀
info bootstrap finished - 12.876 s
⠀
success Building production JavaScript and CSS bundles - 27.080s
success Rewriting compilation hashes - 0.006s
success run queries - 27.262s - 9/9 0.33/s
[                            ]   0.005 s 0/7 0% Building static HTML for pages
{
  cursosJson: { nome: 'Interpretação I', descricao: 'Curso de interpretação' }
}
failed Building static HTML for pages - 5.301s

 ERROR #95313

Building static HTML failed for path "/cursos/int2/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  15 |     return (
  16 |       <Layout>
> 17 |             <SEO title={this.props.data.cursosJson.nome} />
     |                                                    ^
  18 |             <h1>{this.props.data.cursosJson.nome}</h1>
  19 |             <p>{this.props.data.cursosJson.descricao}</p>
  20 |       </Layout>


  WebpackError: TypeError: Cannot read property 'nome' of null

  - curso.js:17 CursoTemplate.render
    src/templates/curso.js:17:52


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Run 2:

$ gatsby build
success open and validate gatsby-configs - 0.045s
success load plugins - 1.308s
success onPreInit - 0.010s
success delete html and css files from previous builds - 0.078s
success initialize cache - 0.020s
success copy gatsby files - 0.286s
success onPreBootstrap - 0.032s
success createSchemaCustomization - 0.012s
success source and transform nodes - 0.093s
success building schema - 0.572s
gatby-node :{
  "node": {
    "id": "int1",
    "descricao": "Curso de interpretação",
    "nome": "Interpretação I"
  }
}
Interpretação I
success createPages - 0.076s
success createPagesStatefully - 0.197s
success onPreExtractQueries - 0.008s
success update schema - 0.076s
success extract queries from components - 0.478s
success write out requires - 0.012s
success write out redirect data - 0.007s
success Build manifest and related icons - 0.009s
success onPostBootstrap - 0.020s
⠀
info bootstrap finished - 8.028 s
⠀
success Building production JavaScript and CSS bundles - 16.301s
success Rewriting compilation hashes - 0.009s
success run queries - 16.448s - 6/6 0.36/s
[                            ]   0.003 s 0/6 0% Building static HTML for pages
{
  cursosJson: { nome: 'Interpretação I', descricao: 'Curso de interpretação' }
success Building static HTML for pages - 2.048s - 6/6 2.93/s
success onPostBuild - 0.003s
info Done building in 26.6513126 sec
Done in 26.95s.
yarn run v1.21.1
$ gatsby serve
info gatsby serve running at: http://localhost:9000/

Run 3:

yarn run v1.21.1
$ gatsby build
success open and validate gatsby-configs - 0.053s
success load plugins - 1.642s
success onPreInit - 0.006s
success delete html and css files from previous builds - 0.024s
success initialize cache - 0.020s
success copy gatsby files - 0.330s
success onPreBootstrap - 0.034s
success createSchemaCustomization - 0.012s
success source and transform nodes - 0.140s
success building schema - 0.552s
gatby-node :{
  "node": {
    "id": "int2",
    "descricao": "Curso de aperfeiçoamento em interpretação de mapas natais. São ensinadas técnicas e abordagens mais específicas, ampliando e aprofundando as possibilidades de interpretação do mapa natal.",
    "nome": "Interpretação II"
  }
}
Interpretação II
gatby-node :{
  "node": {
    "id": "int1",
    "descricao": "Curso de interpretação",
    "nome": "Interpretação I"
  }
}
Interpretação I
success createPages - 0.099s
success createPagesStatefully - 0.147s
success onPreExtractQueries - 0.009s
success update schema - 0.113s
success extract queries from components - 0.809s
success write out requires - 0.015s
success write out redirect data - 0.008s
success Build manifest and related icons - 0.009s
success onPostBootstrap - 0.045s
⠀
info bootstrap finished - 9.319 s
⠀
success Building production JavaScript and CSS bundles - 27.362s
success Rewriting compilation hashes - 0.011s
success run queries - 27.614s - 9/9 0.33/s
[                            ]   0.002 s 0/7 0% Building static HTML for pages
failed Building static HTML for pages - 2.892s

 ERROR #95313

Building static HTML failed for path "/cursos/int2/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


  15 |     return (
  16 |       <Layout>
> 17 |             <SEO title={this.props.data.cursosJson.nome} />
     |                                                    ^
  18 |             <h1>{this.props.data.cursosJson.nome}</h1>
  19 |             <p>{this.props.data.cursosJson.descricao}</p>
  20 |       </Layout>


  WebpackError: TypeError: Cannot read property 'nome' of null

  - curso.js:17 CursoTemplate.render
    src/templates/curso.js:17:52


error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Check out the inconsistencies between run 1 and 2. As you can see the information about the second course was never shown.

The build would go through as you can see below in the screenshot, but opening the page to that course would lead me to the following:

Applying the fix mentioned addressed part of the problem.

With the fix in play and some minor tweaks to your template and gatsby-node.js more specifically :

In src\templates\curso.js

class CursoTemplate extends React.Component {
  render() {
    console.log(
      `Curso Template data:${JSON.stringify(
        this.props.data,
        null,
        2
      )}\npagecontext:${JSON.stringify(this.props.pageContext, null, 2)}`
    )
    return (
      <Layout>
        {/*  <SEO title={this.props.data.cursosJson.nome} />
        <h1>{this.props.data.cursosJson.nome}</h1>
        <p>{this.props.data.cursosJson.descricao}</p> */}
        soon
      </Layout>
    )
  }
}
export const pageQuery = graphql`
  query($id_curso: String!) {
    cursosJson(id: { eq: $id_curso }) {
      nome
      descricao
    }
  }
export default CursoTemplate

In gatsby-node.js:

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

  const result = await graphql(
    `
      {
        allCursosJson(limit: 1000) {
          edges {
            node {
              curso_id
              descricao
              nome
            }
          }
        }
      }
    `
  )

  if (result.errors) {
    reporter.panicOnBuild(`Error while running GraphQL query.`)
    return
  }
  const cursoTemplate = path.resolve(`src/templates/curso.js`)

  result.data.allCursosJson.edges.forEach(edge => {
    console.log(`gatby-node :${JSON.stringify(edge, null, 2)}`)
    console.log(edge.node.nome)
    createPage({
      path: `/cursos/${edge.node.curso_id}/`,
      component: slash(cursoTemplate),
      context: {
        id_curso: edge.node.curso_id,
        nome: edge.node.nome,
        descricao: edge.node.descricao,
      },
    })
  })
}

Yelds the following:

As you can see in the left side is the query you're using with the adjustment i made and on the left is the output of the query in the template and what's being injected via Gatsby special prop context that is accessed through pageContext.

Technically this should work, but it will not, i tried a couple of things and i came up dry.

To give you a bit more context, when gatsby-transformer-json starts processing the json content it will generate the appropriate graphql nodes which in this case will be cursosJson for content type, a connection node and also allCursosJson. It seems that in paper you could access the specific node and fetch the specific data, but no matter what, you can't, as shown above. The solution for this is make some adjustments to the template code, turning it into:

class CursoTemplate extends React.Component {
  static propTypes = {
    data: PropTypes.shape({
      allCursosJson: PropTypes.shape({
        edges: PropTypes.arrayOf(
          PropTypes.shape({
            id: PropTypes.string,
            curso_id: PropTypes.string,
            nome: PropTypes.string,
            descricao: PropTypes.string,
          })
        ),
      }),
    }),
  }
  render() {
    const { data } = this.props // destructures the data object from props
    const { allCursosJson } = data // destructures the object from the data object (query)
    const { edges } = allCursosJson // destructures the result data (i.e the courses info)

    return (
      <Layout>
        {edges.map(edge => (
          <div key={`curso_${edge.node.id}`}>
            <SEO title={edge.node.nome} />
            <h1>{edge.node.nome}</h1>
            <p>{edge.node.descricao}</p>
          </div>
        ))}
      </Layout>
    )
  }
}

export default CursoTemplate
export const pageQuery = graphql`
  query($id_curso: String!) {
    allCursosJson(filter: { curso_id: { eq: $id_curso } }) {
      edges {
        node {
          id
          curso_id
          nome
          descricao
        }
      }
    }
  }
`

With this change i was able to get the data required as you can see below:

On the left side is the query being fetched and on the right side the site and the data obtained.

• Ran gatsby build && gatsby serve to generate once again a production build and emulate it and it went through without a issue. Below are both courses pages.

Took this a step further and hooked up the fork to both netlify and gatsby cloud to see if it all goes through without a hitch ( sorry for doing this without your permission, but it was just to get a full flow tested) and the builds went through without any issues, they are live here in netlify and in gatsby cloud.

A tip for you for further down the line when you're more experienced with Gatsby.

If the data you'll be using will be identical to the present one you have, you could apply a bit of separation of concerns, leave gatsby-node.js to do all the "heavy lifting" fetching the data and transform it and by transforming it i mean it seems that there's probably some correlation between cursos and turmas you make the necessary adjustments and inject the finished data to the templates through Gatsby's special prop context, transforming them into fully functional components whose job is to display data only.

I would like for you to go through this at your own pace and adjust accordingly and see if it works and report back so that i can take down both deploys as they are yours not mine and delete my fork of your site.

Feel free to provide feedback

[afucher]

Hey @jonniebigodes , first of all, thanks for all the explanation and tests.
If I understand correctly, the best approach is to query the data on the gatsby-node.js and pass to the template through the context, right?

I wasn't able to understand why it's not working today, maybe a need more knowledge related to gatsby.

[jonniebigodes]

@afucher no need to thank. I mentioned pulling all the data in gatsby-node.js due to the fact that you're pulling in the same data in gatsby-node.js and in the template and also based on the fact that the data itself is not that "big", so with that in mind you could prevent some unnecessary queries to run when the build is triggered. But that's just me as a bit more experienced with Gatsby and something for you to consider when you're more knowledgeable of Gatsby.

But to be perfectly fair, the current approach you're taking is fine and something you should use as you expand your knowledge of Gatsby's data layer and also Gatsby's workflows and internals.

In my previous comment i forgot to mention the forked repo, when you have a chance, i would like for you to take a look the repo and my response and see if you can get the site to deploy without issues.

Feel free to provide feedback so that we can continue to work on this until we find a suitable solution or close the issue.

[afucher]

Hey @jonniebigodes ,

I was taking a look to your code to check the solution, and I have a question: In your first attempt to solve the issue the query is using the idfield to search, but I think that it should be curso_id here

[jonniebigodes]

@afucher ignore the code in the first approach, it's commented out because of something else. i forgot to take it out before commiting to the repo. Sorry for any misleads it has caused.

[afucher]

no problems. I changed my repo to use the pageContext, and now I'm able to deploy it again.
I've checked your solution and it also works, but I prefered to use the pageContext this time.

Thanks again for your explanation and support.

[jonniebigodes]

@afucher no need to thank, glad that i was able to help you out and you managed to get a working deploy once again. If you don't mind i'm going to remove my Netlify/Gatsby cloud deployments and i'll keep the forked repo temporarly for bit longer, should you want to revisit this. Sounds good?