Links / undefined errors

🙋Get Help
1

Hello, I am making some progress with Frontity (and having some fun on the side).

1 - How should I process to be able to use the react routers for links in template parts from WP? I have created one for the nav and one for the footer and would like have the Links without any reloading of the page. Is that possible? :white_check_mark: FIXED -> Used a processor :cowboy_hat_face:

2 - I am getting this undefined error quite a lot. Any ideas what the problem could be?

the code:

import { connect, styled } from "frontity";
import { fixedHeaderStyles, headerStyles } from "./header-styles";
import Link from "./../link"
let StyledLogo = styled.img({
  'max-height': '120px',
  'max-width': '300px',
  'padding-top': '5px'
})

const FixedHeader = ({ state, libraries }) => {
  // Get the header template.
  const data = state.source.get("/wp_template_part/navigation/");
  const header = state.source["wp_template_part"][data.id];
  // Get the component that transform the template to React.
  const Html2React = libraries.html2react.Component;
  const { isFixedHeaderVisible } = state.theme;
  const url = "/";
  return (
    <div css={fixedHeaderStyles({ state, isFixedHeaderVisible })}>
      {/* Render the template */}
      <Link link={url}><StyledLogo src="http://frontity.hei-schule.ch/wp-content/uploads/2020/07/hei_logo-1.jpg" alt="logo" /></Link>
      <Html2React html={header.content.rendered} />
    </div>
  );
}
export default connect(FixedHeader);

the error:

  TypeError: Cannot read property 'undefined' of undefined
      at FixedHeader (webpack-internal:///./packages/hei-theme/src/components/navigation/index.js:9:107)
      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:21:16)
      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:53:243)
2

I did fix the Issue with a simple Link processor:

import Link from "@frontity/components/link";
const link = {
  name: "link",
  priority: 10,
  // Only process the node it if it's an image.
  test: ({ node }) => node.component === "a",
  processor: ({ node }) => {
    node.props.link = node.props["href"] 
    node.component = Link;
    return node;
  }
};

export default link ;
4

Hey @phn :wave:

It looks like the problem is with this line:

const header = state.source["wp_template_part"][data.id];

when both state.source["wp_template_part"] and data.id are undefined this becomes: undefined[undefined].

Is it possible that you have forgotten to fetch the headers in the beforeSSR action?

If I’m not mistaken, you have taken this example from the frontity website repo, correct? :smiley:

So you can take a look at how we fetch the template_parts: in: https://github.com/frontity/frontity.org/blob/dev/packages/frontity-org-theme/src/actions.ts#L4

You’ll need to do something like:

 beforeSSR: async ({ state, actions }) => {
   await actions.source.fetch(`/wp_template_part/navigation`)
 }
5

Hi @mmczaplinski, thanks for the reply. I am already doing that:

  beforeSSR: async ({ state, actions }) => {
    await Promise.all(
      [
        state.theme.templates.map((slug) =>
          actions.source.fetch(`/wp_template_part/${slug}`)
        ),
      ]
    );
  },

It should work like I do, doesn’t it?

6

Hi @phn

I think you might need to destructure the template object to get the slug, so something like this:

state.theme.templates.map(({ slug }) =>
...
),

Let me know if this helps.

8

Hi @mburridge, yes that has helped a lot :slight_smile:

2 Likes