Weird behavior using gatsby images

Question

In my gatsby app I have the following json file:

Competences.json

{
  "languages": [
    {
      "img": "JS.png",
      "title": "Javascript",
      "text": ""
    },
    {
      "img": "Node.png",
      "title": "Node.js",
      "text": ""
    },
    {
      "img": "Typescript.png",
      "title": "Typescript",
      "text": ""
    },
    {
      "img": "Html.png",
      "title": "HTML",
      "text": ""
    },
    {
      "img": "Css.png",
      "title": "CSS",
      "text": "I have a "
    },
    {
      "img": "java.png",
      "title": "Java",
      "text": ""
    },
    {
      "img": "Csharp.png",
      "title": "C#/ASP.NET Core",
      "text": ""
    }
  ],
  "frameworks": [
    {
      "img": "react.png",
      "title": "React",
      "text": "I have extensive knowledge in React and have used it for most of my personal projects. I have for example built this page using Gatsby.js which is based on React"
    },
    {
      "img": "Angular.png",
      "title": "Angular",
      "text": ""
    },
    {
      "img": "Express.png",
      "title": "ExpressJS",
      "text": ""
    },
    {
      "img": "Gatsby.png",
      "title": "GatsbyJS",
      "text": ""
    }
  ],
  "versionControl": [
    {
      "img": "git.png",
      "title": "Git",
      "text": ""
    }
  ]
}

I am using this json file in the following component:

Competences.js

import React from "react"
import Card from "../Card/Card"
import { useStaticQuery, graphql } from "gatsby"
import CompetencesJSON from "../../../static/Competences/Competences.json"


export default function Competences() {
  const data = useStaticQuery(graphql`
    query competences {
      allCompetenceImages: allFile(filter: { relativeDirectory: { eq: "Competences" } }) {
        nodes {
          id
          base
          childImageSharp {
            fixed(height: 100) {
              ...GatsbyImageSharpFixed
            }
          }
        }
      }
    }
  `)

  Object.keys(CompetencesJSON).forEach((k,i) => {
    CompetencesJSON[k] = CompetencesJSON[k].map(c => {
      const { id, childImageSharp } = data.allCompetenceImages.nodes.find(
        node => c.img === node.base
      )



      return (
        <Card
          key={id}
          text={c.text}
          title={c.title}
          img={childImageSharp.fixed}
          skillLvl={Math.random()*100}
        />

      )
    })
  })

  return (
    <section id="competences" className={styles.competences}>
      <HeadingThree black>Technologies / Programming Langauges</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.languages}</div>
      <HeadingThree black>Frameworks / Libraries</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.frameworks}</div>
      <HeadingThree black>Version Control</HeadingThree>
      <div className={styles.cards}>{CompetencesJSON.versionControl}</div>
    </section>
  )
}

For some reason, every time I am running the development server and then triggering hot reload (by editing the code) I get an error

BUT when I just reload the page the error goes away and everything works fine and gatsby image can load the images without problems.

This happens every time. I edit something, hot reloading fails, I reload the page and then it works fine.

This is of course really annoying during development, and I would like to know if anyone knows why this might happen.

Answer 1

You are modifying CompetencesJSON on each render of the Competences component. The first render replaces each array of object literals with a single React node. The second render assumes the content at each index is still an array, but it's a React node.