Cannot read property 'split' of undefined when filtering the returned data

🙋Get Help
1

I’m currently developing a website where i get the all the terms for two taxonomies to display in a list.

I can get the data with a custom handler i created.

export const termsHandler = {
  priority: 10,
  pattern: "terms/:slug",
  func: async ({ route, state, params, libraries }) => {
    const { api } = libraries.source;
    const { slug } = params;

    const response = await api.get({
      endpoint: slug,
    });

    const items = await response.json();
    const currentPageData = state.source.data[route];

    Object.assign(currentPageData, {
      taxonomy: slug,
      items,
      isTerms: true,
    });
  },
};

Then in the beforeSSR i call them like:

await actions.source.fetch("terms/cuisine");
await actions.source.fetch("terms/type-of-meal");

This all works fine and the data can be used inside my component. But when I try to filter out some terms I get the following error:

capitalize.ts?adee:10 Uncaught (in promise) TypeError: Cannot read property 'split' of undefined
    at __webpack_exports__.default (capitalize.ts?adee:10)
    at Object.eval [as func] (postType.ts?e855:120)
    at eval (actions.ts?f1c8:116)
    at eval (create-store.js?81b0:36)
    at eval (utils.ts?be8a:67)
    at Array.forEach (<anonymous>)
    at process (utils.ts?be8a:66)
    at eval (utils.ts?be8a:73)
    at eval (scheduler.js?f1c4:10)
    at batchedUpdates$1 (react-dom.development.js?61bb:22380)

Code of component:

import React from "react";
import { connect } from "frontity";
import Link from "@frontity/components/link";

const Footer = ({ state, typeOfMealIds, cuisineIds }) => {
  const typeOfMeals = state.source.get("terms/type-of-meal");
  const cuisines = state.source.get("terms/cuisine");

  const getTermLinks = () => {
    const foundTypeOfMeals = typeOfMeals.items.filter(({ id }) =>
      typeOfMealIds.includes(id)
    );

    const foundCuisines = cuisines.items.filter(({ id }) =>
      cuisineIds.includes(id)
    );

    return [...foundTypeOfMeals, ...foundCuisines].map(({ id, name, link }) => (
      <Link key={`recipe-term-${id}`} link={link}>
        {name}
      </Link>
    ));
  };

  return (
    <div>
      <div>{getTermLinks()}</div>
    </div>
  );
};

export default connect(Footer);

The component only shows the filtered output as expected. But i can’t figure out why i get this error. Is there a reason why this is happening? I’ve already tried updating my project like the docs describe but it didn’t fix it.

Code can (temporarily) be found at GitHub.

Issue happens in:

  • src → components → archive → card → footer → index.js
  • src → components → archive → sidebar → list → index.js
3

Hi @reyno.tekoppele

I’m sorry, but your project at https://github.com/theblackgigant/temp-frontity cannot be launched or debugged locally because it relies on some environmental variables that are not available in the project

I recommend you debug your code to check the value of your variables on each execution.

You can check this video where we (DevRel team) talk about how to debug a Frontity project