[gatsby-transformer-csv] on Build unable to render

[endymion1818]

Description

I'm parsing a local CSV and in develop mode I can query the nodes in GraphQL. Using the query in my component in develop mode works fine. But when running "Gatsby Build" I experience an error.

Steps to reproduce

Gatsby Node has the following:

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/data/content/knowledgebase.csv`,
      },
    },
    `gatsby-transformer-csv`,

My GraphQL query is as follows:

    allKnowledgebaseCsv(filter: { Live: { eq: "Published" } }) {
      edges {
        node {
          Question
          Answer
        }
      }
    }

In my parent component I'm passing the data down as follows:

{data.allKnowledgebaseCsv && data.allKnowledgebaseCsv.edges ? (
              <AccordionList
                buffer="0"
                data={data.allKnowledgebaseCsv.edges}
                name="faqs"
                backgroundColor={variable.neutral0}
              />
            ) : null}

And in that child component:

const AccordionList = props => {
  const handleChange = accIndex => {
    const elem = document.getElementById(`${props.name}-accItem-${accIndex}`)
    const elemTop = elem.offsetTop - 150

    // setTimeout is here because of a recognised iPad issue: https://stackoverflow.com/questions/19929197/javascript-window-scrollto-issue-on-ipad

    window.setTimeout(function() {
      window.scrollTo({ top: elemTop, behavior: 'smooth' })
    }, 0)
  }
  return (
    <elem.Wrapper {...props}>
          <Accordion onChange={handleChange}>
            {props.data.map((item, index) => (
              <AccordionItem
                key={index}
                id={`${props.name}-accItem-${index}`}
                uuid={index}
              >
                  <AccordionItemTitle>
                    <QuestionTitle>
                      {item.question || item.node.Question}
                    </QuestionTitle>
                  </AccordionItemTitle>
                  <AccordionItemBody>
                    <QuestionAnswer
                      dangerouslySetInnerHTML={{
                        __html: item.answer || item.node.Answer,
                      }} />
                  </AccordionItemBody>
              </AccordionItem>
            ))}
          </Accordion>
        </elem.Wrapper>
  )
}

export default AccordionList

Expected result

Component should render a list of questions and answers

Actual result

Console throws this error (only when running gatsby build)

  129 |                     <QuestionAnswer
  130 |                       dangerouslySetInnerHTML={{
> 131 |                         __html: item.answer || item.node.answer,
      |                                                          ^
  132 |                       }}
  133 |                     />


  WebpackError: TypeError: Cannot read property 'answer' of undefined

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 10.11.0 - /usr/local/bin/node
    Yarn: 1.7.0 - /usr/local/bin/yarn
    npm: 6.4.1 - /usr/local/bin/npm
  npmPackages:
    gatsby: ^2.0.38 => 2.0.38
    gatsby-plugin-canonical-urls: ^2.0.7 => 2.0.7
    gatsby-plugin-google-analytics: ^2.0.7 => 2.0.7
    gatsby-plugin-google-tagmanager: ^2.0.6 => 2.0.6
    gatsby-plugin-hotjar: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.0.7 => 2.0.7
    gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
    gatsby-plugin-remove-trailing-slashes: ^2.0.4 => 2.0.4
    gatsby-plugin-robots-txt: ^1.3.0 => 1.3.0
    gatsby-plugin-sitemap: ^2.0.2 => 2.0.2
    gatsby-plugin-styled-components: ^3.0.1 => 3.0.1
    gatsby-source-apiserver: ^2.0.0 => 2.0.0
    gatsby-source-filesystem: ^2.0.7 => 2.0.7
    gatsby-source-wordpress: ^3.0.11 => 3.0.11
    gatsby-transformer-csv: ^2.0.3 => 2.0.3
    gatsby-transformer-javascript-frontmatter: ^2.0.3 => 2.0.3
    gatsby-transformer-json: ^2.1.5 => 2.1.5
  npmGlobalPackages:
    gatsby-cli: 2.4.4

If I try to output {item} instead of {item.Question}, I get a React error:

Objects are not valid as a React child (found: object with keys {Question, Answer}).

[endymion1818]

Closing this as it definitely had something to do with my code. I simplified the implementation and it built fine.