TypeError: Cannot read property 'lastIndexOf' of undefined

[ifahrentholz]

Hi there, I've currently a problem with the marriage of AEM and React. When I try to navigate between pages I always get the error: "TypeError: Cannot read property 'lastIndexOf' of undefined".

The fetch for the model.json files working fine getting an 200 OK response and the model is filled with data. Here is the response of the fetched model:

{
  "designPath": "/libs/settings/wcm/designs/default",
  "title": "Aktuelle Störungen",
  "lastModifiedDate": 1590178967221,
  "templateName": "contentpage",
  "cssClassNames": "basepage page basicpage",
  "language": "de",
  ":items": {
    "root": {
      "columnCount": 12,
      "columnClassNames": {
        "breadcrumb": "aem-GridColumn aem-GridColumn--default--12",
        "footer": "aem-GridColumn aem-GridColumn--default--12",
        "header": "aem-GridColumn aem-GridColumn--default--12",
        "content": "aem-GridColumn aem-GridColumn--default--12"
      },
      "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
      "allowedComponents": {
        "applicable": false,
        "components": [
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/wcm/foundation/components/responsivegrid",
            "title": "Layout Container"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/breadcrumb",
            "title": "e-fix Breadcrumb"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/footer",
            "title": "e-fix Footer"
          },
          {
            "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/revu-global/e-fix/components/structure/header",
            "title": "e-fix Header"
          }
        ]
      },
      ":items": {
        "header": {},
        "breadcrumb": {
          "items": [
            {
              "active": false,
              "url": "/content/revu-global/e-fix/edis/de.html",
              "title": "Startseite",
              "wcmio:linkURL": "/content/revu-global/e-fix/edis/de.html",
              "wcmio:linkValid": true,
              "wcmio:linkAttributes": {
                "href": "/content/revu-global/e-fix/edis/de.html"
              }
            },
            {
              "active": true,
              "url": "/content/revu-global/e-fix/edis/de/stoerungen.html",
              "title": "Aktuelle Störungen",
              "wcmio:linkURL": "/content/revu-global/e-fix/edis/de/stoerungen.html",
              "wcmio:linkValid": true,
              "wcmio:linkAttributes": {
                "href": "/content/revu-global/e-fix/edis/de/stoerungen.html"
              }
            }
          ],
          ":type": "revu-global/e-fix/components/structure/breadcrumb"
        },
        "content": {
          "columnCount": 12,
          "columnClassNames": {},
          "gridClassNames": "aem-Grid aem-Grid--12 aem-Grid--default--12",
          "allowedComponents": {
            "applicable": false,
            "components": [
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/form/container",
                "title": "Form"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/container",
                "title": "Container"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/experiencefragment",
                "title": "Experience Fragment"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/image",
                "title": "Image"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/list",
                "title": "List"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/separator",
                "title": "Separator"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/teaser",
                "title": "Teaser"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/text",
                "title": "Text"
              },
              {
                "path": "/content/revu-global/e-fix/edis/de/stoerungen/jcr:content/root/content/revu-global/e-fix/components/content/title",
                "title": "Title"
              }
            ]
          },
          ":items": {},
          ":itemsOrder": [],
          ":type": "wcm/foundation/components/responsivegrid"
        },
        "footer": {}
      },
      ":itemsOrder": ["header", "breadcrumb", "content", "footer"],
      ":type": "wcm/foundation/components/responsivegrid"
    }
  },
  ":itemsOrder": ["root"],
  ":type": "revu-global/e-fix/components/page/basepage"
}

And here is a screenshot of my browser with network and console:

Can anybody help ?

[godanny86]

hi @ifahrentholz revu-global/e-fix/components/page/basepage -> what is the sling:resourceSuperType here?

It doesn't appear that the Hierarchy Model JSON is being used (but the generic sling Model). You would need to have spa.project.core.ui.apps and spa.project.core.core installed which provides the HiearchyPageImpl.

https://github.com/adobe/aem-guides-wknd-spa/blob/React/latest/all/pom.xml#L68 https://github.com/adobe/aem-guides-wknd-spa/blob/React/latest/ui.apps/pom.xml#L73

[ifahrentholz]

Thank you very much Daniel this tip was very helpful. The error is gone for now.

[mrozati]

Thanks @godanny86 for quick help.

just for documentation: Adding HiearchyPageImpl alone did not solve the problem. only after we configured a structureDepth > 0, which made the subpages to be exported as :children, the exception was gone. I wonder if this is really a must to export the child pages on the first request, because I did not see anything in this regard in the documentation.