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

šŸ™‹Get Help
1

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.
2

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 ?

3

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.

5

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:

6

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!