Issue with Responsive Grid and Component Visibility After Converting AEM Remote SPA to TypeScript

[Mukesh42]

Hello Everyone,

I recently completed the conversion of our AEM remote Single Page Application (SPA) from JavaScript to TypeScript. However, following the transition, we encountered a couple of issues relating to the responsive grid functionality and component visibility within AEM.

Specifically, when utilizing the <ResponsiveGrid> component in Home.tsx, we encountered an error regarding the pagePath: "Type '{ pagePath: string; itemPath: string; }' is not assignable to type 'IntrinsicAttributes & { title?: string | undefined}'". How can we go about resolving this type assignment issue?

Additionally, although the option to "Drag the Component" remains visible, components added from the AEM side were not appearing on the page. We also received the error message "Component not mapped for resourcetype: ios/components/title", despite having included the necessary import statements for the component.

Interestingly, directly adding the same component (Title) to the home page, as shown in the code snippet below, resulted in both the components – the one added from the responsive grid and the fixed component – becoming visible:

<ResponsiveGrid
pagePath="/content/wknd-app/us/en/home"
itemPath="root/responsivegrid"
/>

<EditableTitle
pagePath="/content/wknd-app/us/en/home"
itemPath="root/title"
/>

I appreciate any insights or suggestions you can provide to help resolve these issues. Thank you!

[SureshDhulipudi]

looks like this is expecting Title ('IntrinsicAttributes & { title?: string | undefined}') 

you are passing page path and item path : <EditableTitle
pagePath="/content/wknd-app/us/en/home"
itemPath="root/title"
/>

can you provide your full code?

[Mukesh42]

Hi @SureshDhulipudi ,

When I am using JavaScript, this was working fine but once changed to typescript I am getting this kind of error. 

This is the complete code:

import React from "react";
import EditableTitle from "./editable/EditableTitle";
import { ResponsiveGrid } from "@adobe/aem-react-editable-components";

function Home() {
  return (
    <div className="Home">
      <ResponsiveGrid
        pagePath="/content/wknd-app/us/en/home"
        itemPath="root/responsivegrid"
      />
      <EditableTitle
        pagePath="/content/wknd-app/us/en/home"
        itemPath="root/title"
      />
    </div>
  );
}
export default Home;

[SureshDhulipudi]

https://github.com/adobe/aem-react-editable-components/blob/master/src/components/ResponsiveGrid.tsx

In TypeScript, when you import ResponsiveGrid, it checks the types of the props that ResponsiveGrid expects at compile time.

In the above case - the ResponsiveGrid component is expecting a title prop (among possibly others), but you're passing pagePath and itemPath props. This is fine in JavaScript, because it doesn't check prop types, but in TypeScript, it results in a type error. Add title and try it again.

[Mukesh42]

Hi @SureshDhulipudi,

I've included the title, but there's been no change in the situation despite its addition. The issue persists.

Thanks,

Mukesh

[SureshDhulipudi]

can you change ResponsiveGrid to container and try

import { ResponsiveGrid } from "@adobe/aem-react-editable-components";

to

import { Container } from "@adobe/aem-react-editable-components";

 Container component is the one that takes pagePath and itemPath props.

[Mukesh42]

If we're utilizing the Container component, what should be specified in the itemPath? I've attempted both:

<Container
        pagePath="/content/wknd-app/us/en/home"
        itemPath="root/responsivegrid"
      />

and

<Container
        pagePath="/content/wknd-app/us/en/home"
        itemPath="root/Container"
      />

However, in both instances, the container or responsive grid isn't visible on the page.

[kautuk_sahni]

@Mukesh42 Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.