Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

AEM SPA (React) not compatible with Latest AEM Core Component

Avatar

Community Advisor

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"

 

1 Accepted Solution

Avatar

Correct answer by
Employee

@Mahedi_Sabuj 

 

It will be good if you raise an issue by using github (link below)

https://github.com/adobe/aem-react-core-wcm-components-base/issues

Provide all details version information and steps to replicate. Team will take those things in future releases.

View solution in original post

2 Replies

Avatar

Correct answer by
Employee

@Mahedi_Sabuj 

 

It will be good if you raise an issue by using github (link below)

https://github.com/adobe/aem-react-core-wcm-components-base/issues

Provide all details version information and steps to replicate. Team will take those things in future releases.

Avatar

Community Advisor

Thanks @Nishant-Singh, Although there hasn't been much activity on the repository, I will raise an issue on GitHub.