Solved
AEM SPA (React) not compatible with Latest AEM Core Component
I am using AEM ArcheType 41 and AEM Core Components v2.21.0.
I inherited Image Core Component and found that React Component HTML not match with Core Component HTML. To resolve the issue, I tried to overwrite React Component but got typing error in Typescript - "Unresolved Variable srcset".
Although srcset is available on Sling Model, it is missing at React Typescript interface. For now, I added new interface which extends Core Component ImageV2Model.
What would be the best practices here? Also, Can anyone know that any plan to update @adobe/aem-core-components-react-base package?
interface ImageModel extends ImageV2Model {
srcset: string
}
const Image = (props: ImageModel) => {
const { isInEditor = false } = props;
return (
<div className={`${props.baseCssClass}${isInEditor ? ' cq-dd-image' : ''}`}
itemScope itemType='https://schema.org/ImageObject'>
<image src={props.src}
className={props.baseCssClass + '__image'}
srcset={props.srcset}
itemprop='contentUrl'
alt={props.alt}/>
</div>
);
}
Here are React Packages:
"@adobe/aem-core-components-react-base": "^1.1.8",
"@adobe/aem-core-components-react-spa": "^1.2.0",
"@adobe/aem-react-editable-components": "^1.1.6",
"@adobe/aem-spa-component-mapping": "^1.1.1",
"@adobe/aem-spa-page-model-manager": "^1.3.11"