TypeError on first run after install

[eduoliveira85]

What was done

I've installed and copied gatsby-browser.js to my project root folder, then created hooks for each of the relations I'd use it with Tina CMS: for blog post authors, categories and tags. You can see the files below.

gatsby-browser.js

import './src/css/tailwind.css';
import './src/scss/default.scss';
//import TinaCMSConditionField from 'tinacms-condition-field';
import TinaCMSRelationField from 'tinacms-relation-field';
//import TinaCMSFileField from 'tinacms-file-field';

import useAuthors from './src/hooks/useAuthors'
import useCategories from './src/hooks/useCategories'
import useTags from './src/hooks/useTags'

export const onClientEntry = () => {
  //const conditionField = new TinaCMSConditionField(window.tinacms);
  //
  //conditionField.install();

  const relationField = new TinaCMSRelationField(window.tinacms);

  relationField.install([{
    name: 'authors',
    hook: useAuthors,
    itemProps: (author) => ({
      key: author.id,
      label: author.frontmatter.name,
    }),
    noDataText: 'Nenhum autor encontrado',
  }]);

  relationField.install([{
    name: 'categories',
    hook: useCategories,
    itemProps: (categories) => ({
      id: Math.random()
          .toString(36)
          .substr(2, 9),
      label: categories.fieldValue,
    }),
    sortable: true,
    multiple: true,
    noDataText: 'Nenhuma categoria encontrada',
  }]);

  relationField.install([{
    name: 'tags',
    hook: useTags,
    itemProps: (tags) => ({
      id: Math.random()
          .toString(36)
          .substr(2, 9),
      label: tags.fieldValue,
    }),
    sortable: true,
    multiple: true,
    noDataText: 'Nenhuma tag encontrada',
  }]);

//  const fileField = new TinaCMSFileField(window.tinacms);
//  fileField.install();
//  };

Notice I've used the same Math.random() formula from TinaCMS group-list example, since there's no ID attributed for categories or tags. Then, the hooks:

useAuthors.js

import { useStaticQuery, graphql } from 'gatsby'

export default () => {
  const { authors } = useStaticQuery(
    graphql`
      query authorCollectionQuery {
        authors: allMarkdownRemark(
          filter: {
            frontmatter: {
              type: {
                eq: "autor-page"
              }
            }
          }
        ) {
          nodes {
            id
            frontmatter {
              name
            }
          }
        }
      }
    `
  )

  return authors.nodes

}

useCategories.js

import { useStaticQuery, graphql } from 'gatsby'

export default () => {
  const { categories } = useStaticQuery(
    graphql`
      query categoriesCollectionQuery {
        categories: allMarkdownRemark(
          filter: {
            frontmatter: {
              type: {
                eq: "blog-post"
              }
            }
          }
        ) {
          group(field: frontmatter___categories) {
            fieldValue
          }
        }
      }
    `
  )

  return categories.group

}

useTags.js

import { useStaticQuery, graphql } from 'gatsby'

export default () => {
  const { tags } = useStaticQuery(
    graphql`
      query tagsCollectionQuery {
        tags: allMarkdownRemark(
          filter: {
            frontmatter: {
              type: {
                eq: "blog-post"
              }
            }
          }
        ) {
          group(field: frontmatter___tags) {
            fieldValue
          }
        }
      }
    `
  )

  return tags.group

}

What was expected

To be able to insert fields for these parameters into blogpost template so TinaCMS would help me handle such values

What happened

_TypeError: react_isWEBPACK_IMPORTED_MODULE2default.a is undefined_

Not a clue what is this about. Researching on Google, I found out it could be something to do with some react callback or even a version, but mine is up to date:

"react": "^16.13.1", "react-dom": "^16.13.1",

I've pushed the repo into a branch to work only with TinaCMS and my last commit was entirely about installing tinacms-fields. You can find it here.

Could you please help me to find out what might be the issue? I'm even thinking I've installed it wrong.

[mmintel]

@edueter hi there! thanks for the issue report. I tried to investigate but it seems you didn't push any change to your branch. The fields are not installed and the gatsby-browser.js only contains

import './src/css/tailwind.css';
import './src/scss/default.scss'

[eduoliveira85]

Thanks for your effort, Marc. My mistake, I thought I have done it. It's there now, with a few changes. I've uninstalled the other plugins to keep tinacms-relation-fields only, but the error keeps appearing.

This email field is something I've done yesterday to handle e-mail input for authors in my blog.