Internal Server Error on POSTS ONLY using Chakra UI #442

🙋Get Help
1 
** TypeError: Cannot read property '96' of undefined
at Post (webpack-internal:///./node_modules/frontity-chakra-theme/src/components/post/post.js:23:1812)
at runAsReaction (webpack-internal:///./node_modules/@frontity/connect/src/reactionRunner.js:16:45)
at reaction (webpack-internal:///./node_modules/@frontity/connect/src/observer.js:7:131)
at eval (webpack-internal:///./node_modules/@frontity/connect/src/connect.js:18:8)
at processChild (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:397:2319)
at resolve (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:396:122)
at ReactDOMServerRenderer.render (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:1199)
at ReactDOMServerRenderer.read (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:433:55)
at renderToString (webpack-internal:///./node_modules/react-dom/cjs/react-dom-server.node.development.js:470:116)
at eval (webpack-internal:///./node_modules/@frontity/core/src/server/index.tsx:46:243)**

Home Page works fine but when i click on any post it gives me INTERNAL SERVER ERROR

Steps involved to reproduce the problem
You need to use Chakra UI theme and this issue will happen, it wont happen with other themes

2

it is related to this issue: How to remove category prefix from category URLs?

However how to add the code, where exactly in the JS file? and what to change since my theme is Chakra not Mars

my current config:

const settings = {
  "name": "visit-guide",
  "state": {
    "frontity": {
      "url": "https://www.visit.guide",
      "title": "دليل السفر",
      "description": "دليل المسافر العربي"
    }
  },
  "packages": [
    {
      "name": "frontity-chakra-theme",
      "state": {
        "theme": {
			// The logo can be a text or an image url
          logo: "دليل السفر",
          // show background pattern
          showBackgroundPattern: false,
          // show social links
          showSocialLinks: false,
          // the top-level navigation labels and links
			
          "menu": [
            [
              "الرئيسية",
              "/"
            ],
            [
              "وجهات",
              "/category/destinations/"
            ],
            [
              "مصر",
              "/category/egypt/"
            ],
            [
              "شرم الشيخ",
              "/category/egypt/sharm-el-sheikh/"
            ],
            [
              "القاهرة",
              "/category/egypt/cairo/"
            ]
          ],
		  
		    // the social links
          socialLinks: [
            ["pinterest", "https://www.pinterest.com/frontity/"],
            ["facebook", "https://www.instagram.com/frontity/"],
            ["twitter", "https://www.twitter.com/frontity/"]
          ],
		  
		            // color shades to use in the blog
          colors: {
            primary: {
              "50": "#e9f5f2",
              "100": "#d4dcd9",
              "200": "#bbc3be",
              "300": "#a1aba5",
              "400": "#87938b",
              "500": "#6d7972",
              "600": "#555f58",
              "700": "#323c34",
              "800": "#232924",
              "900": "#272727"
            },
            accent: {
              "50": "#ede4d3",
              "100": "#fbe3b2",
              "200": "#f6d086",
              "300": "#f1be58",
              "400": "#eca419",
              "500": "#d49212",
              "600": "#a5710b",
              "700": "#775105",
              "800": "#483100",
              "900": "#1d0f00"
            }
          }
		  

          }
        }

    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://www.visit.guide/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react",
	"@frontity/head-tags"
  ]
};

export default settings;
3

Hi @shehab!

For the problems you had with the Chakra theme take a loot at what I answered you in the issue: frontity/frontity#442.

I think this is related to the issue frontity/frontity#443 instead, right?

The file that needs to be modified is packages/frontity-chakra-theme/index.js as you are using the Chakra theme. After adding there the handler mentioned in How to remove category prefix from category URLs? it would look something like this:

import Theme from "./components";
import image from "@frontity/html2react/processors/image";
import processors from "./components/styles/processors";
// import { theme } from "@chakra-ui/core";

const newHandler = {
  name: "categoryOrPostType",
  priority: 19,
  pattern: "/(.*)?/:slug",
  func: async ({ route, params, state, libraries }) => {
    // 1. try with category.
    try {
      const category = libraries.source.handlers.find(
        (handler) => handler.name == "category"
      );
      await category.func({ route, params, state, libraries });
    } catch (e) {
      // It's not a category
      const postType = libraries.source.handlers.find(
        (handler) => handler.name == "post type"
      );
      await postType.func({ route, params, state, libraries });
    }
  },
};

const chakraTheme = {
  name: "frontity-chakra-theme",
  roots: {
    // In Frontity, any package can add React components to the site.
    // We use roots for that, scoped to the "theme" namespace.
    theme: Theme,
  },
  state: {
    // State is where the packages store their default settings and other
    // relevant state. It is scoped to the "theme" namespace.
    theme: {
      /**
       * The logo can be a text or an image url
       * logo : "Frontity"
       * logo: "https://uploads-ssl.webflow.com/5be00771820599586e6bd032/5be0223588110a6dbcac2d05_image.svg",
       */
      logo: "Frontity",
      showBackgroundPattern: true,
      showSocialLinks: true,
      /**
       * socialLinks: [
            ["pinterest", "https://www.pinterest.com/frontity/"],
            ["facebook", "https://www.instagram.com/frontity/"],
            ["twitter", "https://www.twitter.com/frontity/"]
          ],
       */
      socialLinks: [],
      menu: [],
      featured: {
        showOnArchive: false,
        showOnPost: true,
      },

      colors: {
        primary: {
          50: "#e9f5f2",
          100: "#d4dcd9",
          200: "#bbc3be",
          300: "#a1aba5",
          400: "#87938b",
          500: "#6d7972",
          600: "#555f58",
          700: "#323c34",
          800: "#232924",
          900: "#272727",
        },
        accent: {
          50: "#ede4d3",
          100: "#fbe3b2",
          200: "#f6d086",
          300: "#f1be58",
          400: "#eca419",
          500: "#d49212",
          600: "#a5710b",
          700: "#775105",
          800: "#483100",
          900: "#1d0f00",
        },
      },
      isSearchModalOpen: false,
      isMobileMenuOpen: false,
      autoPreFetch: "all",
    },
  },
  // Actions are functions that modify the state or deal with other parts of
  // Frontity like libraries.
  actions: {
    theme: {
      openMobileMenu: ({ state }) => {
        state.theme.isMobileMenuOpen = true;
      },
      closeMobileMenu: ({ state }) => {
        state.theme.isMobileMenuOpen = false;
      },
      openSearchModal: ({ state }) => {
        state.theme.isSearchModalOpen = true;
      },
      closeSearchModal: ({ state }) => {
        state.theme.isSearchModalOpen = false;
      },
    },
  },
  libraries: {
    html2react: {
      // Add a processor to html2react so it processes the <img> tags
      // inside the content HTML. You can add your own processors too.
      processors: [image, ...processors],
    },
    source: {
      handlers: [newHandler],
    },
  },
};

export default chakraTheme;