Level 2

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

Forum|Forum|2 years ago
February 28, 2024
2 replies
1726 views

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:

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

SureshDhulipudi

Community Advisor

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?

M

Mukesh42Author

Level 2

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

Community Advisor

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.

kautuk_sahni

Community Manager

@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.

Kautuk Sahni

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded