Tinacms: useJsonForm w/ nested objects breaks gatsby build

[kendallstrautman]

Description

On the info page of my starter blog, the data is sourced from this json file. The contact object seems to be the main culprit. The useJsonForm hook works fine in development, and the contact and its children are rendered as a Group Field. When running gatsby build however, it seems the children of contact are undefined. I played around with it and can confirm that moving the contact object from info.json or flattening the json object into only one level deep makes the build succeed.

Steps to reproduce

git clone [email protected]:kendallstrautman/brevifolia-gatsby-tinacms.git
yarn install && yarn build

Checkout src/pages/info.js where the hook is used.

Expected result

The build succeeds.

Actual result

You should see this error

Building static HTML failed for path "/info/"

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


  51 |           <li>
  52 |             <p>
> 53 |               <a href={`mailto:${infoData.contact.email}`}>Email: {infoData.contact.email}</a>
     |                                                   ^
  54 |             </p>
  55 |           </li>
  56 |           <li>


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

  - info.js:53 Info
    src/pages/info.js:53:51

Environment

MacOS Mojave 10.14.6
Firefox 70.0

"gatsby-tinacms-git": "^0.2.5",
 "gatsby-tinacms-json": "^0.5.0",
 "gatsby-transformer-json": "^2.2.16",

[ncphillips]

This is the culprit

That should be:

  if (!jsonNode || process.env.NODE_ENV === 'production') {
    return [jsonNode, null]
  }

[spbyrne]

I'm going to test this change in demo-gatsby and create a PR if it works.

[spbyrne]

Confirmed that this fixes the issue, PR created.