4.6 Exercise 2 - Create Title & Image Component does not render

Content SaaS
1

Hi. I’m working through " Content Developer Foundations - Content SaaS: On-demand".

I’ve tried to follow through the steps of 4.6 Exercise 2, but I’m not seeing the “Title and Image” component being rendered. I continue to get the “Component “TitleAndImage” is not defined” message when viewing the FAQ page via the experience manager.

The 4.7 Exercise 2 “explanation” video doesn’t seem to show me anything that I’m not doing (the code in the video also looks a bit different?).

The response in the browser dev tools for the FAQ page does include the TitleAndImage component.

The full page response is too long to include, but I can see the TitleAndImage component in it:

 "u8b030ba4549548649a5e65940f5d4a56": {
                                "id": "p1_p1_p1_p2",
                                "links": {
                                    "self": {
                                        "href": "https://brx-content-training04.bloomreach.io/delivery/site/v1/channels/brx-saas/pages/faq?_hn:type=component-rendering\u0026_hn:ref=p1_p1_p1_p2\u0026endpoint=https%3A%2F%2Fbrx-content-training04.bloomreach.io%2Fdelivery%2Fsite%2Fv1%2Fchannels%2Fbrx-saas%2Fpages",
                                        "type": "external"
                                    }
                                },
                                "meta": {
                                    "paramsInfo": {
                                    },
                                    "params": {
                                    },
                                    "beginNodeSpan": [
                                        {
                                            "type": "comment",
                                            "data": "\u003c!-- { \"HST-Label\":\"Title and Image\", \"HST-XPage-Editable\":\"true\", \"HST-LastModified\":\"1729169570827\", \"HST-Shared\":\"false\", \"HST-Experience-Page-Component\":\"true\", \"HST-Component-Content-Id\":\"27bcde3e-a9ce-4b4a-8dae-a172ae7aa468\", \"uuid\":\"14ae7121-7167-4b9d-94d2-244529f4e5b2\", \"HST-Type\":\"CONTAINER_ITEM_COMPONENT\", \"refNS\":\"p1_p1_p1_p2\", \"url\":\"/delivery/site/v1/channels/brx-saas/pages/faq?_hn:type=component-rendering\u0026_hn:ref=p1_p1_p1_p2\u0026endpoint=https%3A%2F%2Fbrx-content-training04.bloomreach.io%2Fdelivery%2Fsite%2Fv1%2Fchannels%2Fbrx-saas%2Fpages\"} --\u003e"
                                        }
                                    ],
                                    "endNodeSpan": [
                                        {
                                            "type": "comment",
                                            "data": "\u003c!-- { \"uuid\":\"14ae7121-7167-4b9d-94d2-244529f4e5b2\", \"HST-End\":\"true\"} --\u003e"
                                        }
                                    ]
                                },
                                "name": "title-and-image-xcnmC",
                                "label": "Title and Image",
                                "type": "container-item",
                                "ctype": "TitleAndImage",
                                "componentClass": "org.hippoecm.hst.component.support.bean.dynamic.BaseHstDynamicComponent",
                                "content": {
                                    "$ref": "/page/ud6d64c8f2f3f4f21aa662760f17a0917"
                                }
                            },

and:

"ud6d64c8f2f3f4f21aa662760f17a0917": {
                                    "type": "componentcontent",
                                    "data": {
                                        "name": "referencespa:kmvLiaXh6u-frMXN",
                                        "displayName": "referencespa:kmvLiaXh6u-frMXN",
                                        "image": {
                                            "$ref": "/page/u6c8136ba996242b5b3b6210c8ba64271"
                                        },
                                        "title": "this is hetitleAndImage title value",
                                        "contentType": "referencespa:titleandimage"
                                    }
                                },

and:

"u6c8136ba996242b5b3b6210c8ba64271": {
                                        "type": "imageset",
                                        "links": {
                                        },
                                        "meta": {
                                        },
                                        "data": {
                                            "fileName": "about1.jpg",
                                            "description": null,
                                            "original": {
                                                "name": "hippogallery:original",
                                                "displayName": "hippogallery:original",
                                                "width": 436,
                                                "height": 326,
                                                "lastModified": 1603827478131,
                                                "mimeType": "image/jpeg",
                                                "filename": null,
                                                "contentType": "hippogallery:image",
                                                "size": 31109,
                                                "links": {
                                                    "site": {
                                                        "href": "https://brx-content-training04.bloomreach.io/delivery/resources/content/gallery/channel-templates/referencespa/images/about1.jpg",
                                                        "type": "resource"}}
                                                    },
                                                    "name": "about1.jpg",
                                                    "displayName": "about1.jpg",
                                                    "small": null,
                                                    "large": null,
                                                    "smallsquare": null,
                                                    "mediumsquare": null,
                                                    "largesquare": null,
                                                    "banner": null,
                                                    "thumbnail": {
                                                        "name": "hippogallery:thumbnail",
                                                        "displayName": "hippogallery:thumbnail",
                                                        "width": 60,
                                                        "height": 44,
                                                        "lastModified": 1603827478131,
                                                        "mimeType": "image/jpeg",
                                                        "filename": "about1.jpg",
                                                        "contentType": "hippogallery:image",
                                                        "size": 3494,
                                                        "links": {
                                                            "site": {
                                                                "href": "https://brx-content-training04.bloomreach.io/delivery/resources/thumbnail/content/gallery/channel-templates/referencespa/images/about1.jpg",
                                                                "type": "resource"
                                                            }
                                                        }
                                                    },
                                                    "contentType": "xm:imageset",
                                                    "localeString": null,
                                                    "id": "6c8136ba-9962-42b5-b3b6-210c8ba64271"
                                                }
                                            }

How can I go about trying to work out why the new component is not rendering?

Is there anything obvious it looks like I have missed?

Thanks.

2

Hey @asan if you are still seeing the message “Component ‘TitleAndImage’ is not defined” that means the SPA SDK can not find a matching frontend component to render it even though it is part of the page structure.

Check in your mapping where you pass all your react components that the React component is either named “TitleAndImage” or an alias is passed along eg “TitleAndImage” : MyReactTitleAndImageComponentThatDoesntMatchInName

Kind regards

3

Thanks for the response.

Check in your mapping where you pass all your react components that the React component is either named “TitleAndImage” or an alias is passed along eg “TitleAndImage” : MyReactTitleAndImageComponentThatDoesntMatchInName

I am very new to React, but, reading your response I think I am doing what you’ve highlighted.

I have an export statement in “bloomreach-reference-spa/components/index.ts”, which is:

... <other export statements omitted> ...
export * from './TitleAndImage';

I have created a folder “bloomreach-reference-spa/components/TitleAndImage”.

The “index.ts” file there is:

export { TitleAndImage } from './TitleAndImage';

The “TitleAndImage.tsx” file there is, as per the explanation video:

import React, { useState } from 'react';

import { Container, Image } from 'react-bootstrap';
import { BrProps } from '@bloomreach/react-sdk';
import { ContainerItem, getContainerItemContent, ImageSet, Reference } from '@bloomreach/spa-sdk';

import styles from './TitleAndImage.module.scss';

interface TitleAndImageParameters {
  image?: Reference;
  title: string;
}

export function TitleAndImage({ component, page }: BrProps<ContainerItem>): React.ReactElement | null {
  const { title, image: imageRef } = getContainerItemContent<TitleAndImageParameters>(component, page) ?? {};

  const [hasError, setHasError] = useState(false);

  if (!imageRef || component.isHidden()) {
    return page.isPreview() ? <div /> : null;
  }

  const image = imageRef && page?.getContent<ImageSet>(imageRef);
  return (

      <Container className={`${styles.banner} `} >
        {title && <span className="d-block h3 mb-3">{title}</span>}
        {image && (
          <span className={`${styles.banner__container} d-block position-relative h-0 mb-3`}>
            <Image
              className={`${styles.banner__image} position-absolute w-100 h-100`}
              src={image.getOriginal()?.getUrl()}
              alt={title}
            />
          </span>
        )}

      </Container>

  );
}

The last piece seems to be “bloomreach-reference-spa/components/App.tsx”. Which has:

import {
  ... <other component names omitted> ...
  TitleAndImage,
} from '.';

Where the “mapping” const is:

const mapping = {
    ...<other component names omitted> ...
    TitleAndImage,
  };

Is there somewhere I can look for logs/error messages/more info? There’s no in the console after I “npm run start”, except:

~/W/b/bloomreach-reference-spa ((20230503))> npm run start


> @bloomreach/example-saas@0.3.0-saas start
> next start

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/******/Work/bloomreach/bloomreach-reference-spa/.env
4

Mmmm, OK.

Looking at the Github README.md of “bloomreach-reference-spa” it mentions you can run “npm run dev”.

Having run “npm run dev” rather than “npm run start” the TitleAndImage component starts rendering.

Beginner mistake I guess!