<Head> giving error "Cannot read property 'add' of undefined"

So I want to include a favicon generated by RealFavIconGenerator.net but in just adding the that comes with Frontity, I get the error “Cannot read property ‘add’ of undefined”. Here is the code:

import React from 'react'
import {connect, Global, css, styled, Head} from 'frontity'
import Switch from '@frontity/components/switch'

import Header from './global/header'
import Footer from './global/footer'

import Loading from './loading'
import Home from './home'
import Post from './post'
import PageError from './page-error'

const Root = ({state, theme}) => {
  const data = state.source.get(state.router.link)

  return (
    <>
      <Head>
        <title>{state.frontity.title}</title>
        <meta name="description" content={state.frontity.description} />
        <html lang="en" />
        <link rel="canonical" href={state.router.link} />
      </Head>

      <Global 
        styles={css`
          @import url("https://use.typekit.net/tdr5ulz.css");

          * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
          }

          #root {
            font-family: century-gothic, sans-serif;
            font-style: normal;
            font-weight: 400;
            color: ${theme.colors.dark};
            background: ${theme.colors.light};
            line-height: 1.5;
            letter-spacing: 1px;

            display: flex;
            min-height: 100vh;
            flex-direction: column;
          }

          h2 {
            text-align: center;
            margin-bottom: 1.5rem;
            font-weight: 400;
            font-size: 2.5rem;

            ${theme.breakPoints.mobile} {
              font-size: 1.5rem;
            }

            &:after {
              content: "";
              clear: both;

              display: block;
              width: 5rem;
              margin: 0.5rem auto;
              border-bottom: ${theme.colors.primary} 1px solid;
            }
          }

          h3 {
            text-align: center;
            color: ${theme.colors.primary};
            font-weight: 400;
            font-size: 1.25rem;
          }

          button, a {
            border: 0;
            outline: 0;

            &::-moz-focus-inner {
              border: 0;
            }
          }

          button {
            font-family: sans-serif;
          }

          a {
            text-decoration: none;
            transition: 0.125s all ease-in-out;
            color: ${theme.colors.dark};
            font-weight: bold;

            &:visited {
              color: ${theme.colors.dark};
            }

            &:active, &:hover, &:focus {
              color: ${theme.colors.primary};
            }
          }

          img {
            max-width: 100%;
          }
        `}
      />

      <Header />

      <SiteContent theme={theme}>
        <Switch>
          <Loading when={data.isFetching} />
          <Home when={data.isHome} />
          <Post when={data.isPostType} />
          <PageError when={data.isError} />
        </Switch>
      </SiteContent>

      <Footer />
    </>
  )
}

export default connect(Root)

const SiteContent = styled.main`
  flex: 1;
  margin-top: 5rem;

  ${props => props.theme.breakPoints.navbar} {
    margin-top: 3rem;
  }
`

If I remove <Head>, it’ll work no problem. If I empty <Head>, it breaks still. I am using frontity-head-tags and the WP REST - Head Tags plugin to get head tags from WordPress, could that be the problem?

Here is my system information:

## System:
 - OS: Linux 5.4 Pop!_OS 20.04 LTS
 - CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
 - Memory: 15.05 GB / 31.22 GB
 - Shell: 5.0.16 - /bin/bash
## Binaries:
 - Node: 10.21.0 - ~/n/bin/node
 - npm: 6.14.4 - ~/n/bin/npm
## Browsers:
 - Chrome: 83.0.4103.116
 - Firefox: 78.0.1
## npmPackages:
 - @frontity/core: ^1.7.2 => 1.7.2 
 - @frontity/head-tags: ^1.0.4 => 1.0.4 
 - @frontity/html2react: ^1.3.4 => 1.3.4 
 - @frontity/tiny-router: ^1.2.1 => 1.2.1 
 - @frontity/wp-source: ^1.8.0 => 1.8.0 
 - frontity: ^1.10.0 => 1.10.0 
 - interpayments-theme: file:packages/interpayments-theme => 1.0.0 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

  
  System info copied in the clipboard!
  You can now paste it in the Frontity Community or GitHub issue.

Hey Dave!

Your code looks correct here :slight_smile:

It would be great if you can share the repo where you encounter this problem. I know you mentioned before that this is a private project so if that’s not possible, could you create a minimal reproduction connected to the same WP backend ?

Hey @mmczaplinski,

Thanks for getting back to me! It was driving me crazy because to me it looked like correct code.

What I tried that didn’t work was cleaning the node_modules and package-lock.json files and reinstalling. I also tried removing all my dependencies and that still didn’t work. I also tried upgrading to node 12 as I thought maybe that would help but it did not.

What I did to fix it was simply to replace the favicon.ico in the root directory. It’s not perfect because I’d love to use RealFaviconGenerator to create favicons for all devices, but for now, this will work (also, I’m not sure if Frontity handles the other icons and themes automatically but my guess would be it doesn’t).

What I learned was the following:

  1. My project’s theme uses dropdown menus, so I’ve used a nesting structure in the menu section of my theme object in frontity.settings.js as per the following:
const settings = {
  ...
  "packages": [
    {
      ...
      "state": {
        "theme": {
          "menu": [{
              title : "Product",
              link  : "/product/",
              dropdown: [{ // START DROPDOWN
                title : "Compliance",
                link  : "/compliance/",
                cta: false
             }, {
                title : "Technology",
                link  :  "/technology",
                cta: false
              }], // END DROPDOWN
              cta: false
            }, {
              title:  "Partners",
              link:  "/partners/",
              cta: false
            }, ...],
            ...
        }
      }
    },
    ...
  ]
}

export default settings;

That was causing the error “Cannot read property add of undefined”.

  1. Even after resolving that issue, the <Head> element still didn’t work when using ‘@frontity/head-tags’ and a WordPress installation with the REST API - Head Tags plugin and Yoast SEO sending head tag information. I was able to test this pretty quickly by creating a brand new Frontity project, creating a new package for an empty theme, adding a <Head> tag to verify that it works (code here), then I installed ‘@frontity/head-tags’ and connected it to my other back end with Yoast SEO head tag data. It will overwrite the <Head> element with Yoast data.

This is great if you want to persist SEO metadata but if you also want a multi-platform favicon to be displayed as per RealFaviconGenerator (or code animated favicons etc.), it would be great if the <Head> element can either take precedence OR it can be flagged whether it is overwriting or not.

Hey @david1,

Glad you’ve been able to resolve this and apologies for the inconvenience!

My colleague @mburridge was able to reproduce the issue and we’re working on a fix.

In the meantime I can just offer an excuse which is that this a class of bugs that are difficult to catch in development as they are require a WP instance with a particular configuration to be tested against a frontity application with a particular configuration.

However, the sliver lining here is that we’re trying to eliminate those classes of bugs by working on an E2E Testing system (more details in: E2E testing that requires WordPress instances) that can start custom WP instances, a frontity app connected to such an instance AND run end-to-end tests against that frontity app using cypress.js. We expect it to finish it in the coming weeks :slight_smile:

Thanks for getting back to me @mmczaplinski. I’m still having some issues getting the favicon to show up but I’m sure I’ll figure out what it is in the configuration on my end that’s causing the issue. That E2E testing system looks like it’ll help quite a bit. Keep up the good work!