Unable to read 'show' property

I’m not sure why I’m getting this Error:

TypeError: Cannot read property 'show' of undefined
loadInitialValues
node_modules/gatsby-tinacms-json/index.js:1

I’m trying to edit my JSON file:

{
  id: "string",
  title: "string",
  items: [
    {
      id: "string",
      text: "string"
    }
    // and so on...
  ]
}

inside my component:

const {data} = useCustomHook();
const [modifiedValues] = useLocalJsonForm(data, customFormOptions);

return (
  <div>
    <h1>{modifiedValues.title}</h1>
    <ItemsComponent {...modifiedValues.items} />
  </div>
)

the customFormOptions:

{
  fields: [
    {
      label: 'Title',
      name: 'rawJson.title',
      description: '',
      component: 'text',
    },
    {
      label: 'Items',
      name: 'rawJson.items',
      component: 'group-list',
      description: '',
      itemProps: item => ({
        key: item.id,
        label: item.text,
      }),
      defaultItem: () => ({
        id: randomString(), // return string (similar to what I read on the documentation about group-lists)
        text: 'default text',
      }),
      fields: [
        {
          label: 'Text',
          name: 'text',
          component: 'text',
        },
      ],
    },
  ],
}

So there are few things that I’m unsure about and dunno if it’s relates to error that I’m getting.

  • Should the id property of my JSON file also be in the customFormOptions
  • Is it okay, that I’m separating these the hook the formOptions in to different files?
  • Is it okay, that I’m doing all of this inside a nested component located on my Gatsby page?
  • Is it okay, to pass the item values to a static component as props?

Not really sure why I’m getting this “show” error. Every other error that I’ve received I’ve been able to see that mistake and fix it. B

Did I articulate the issue ?? Any thoughts??
Thank you

UPDATE

I looked the example on:

and I changed my gatsby configuration.

I’m gonna handle these JSON resources first and then tackle the Markdown…