Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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.