data-sly-resource resulting 404 custom error handler.

[sreenu539]

I have below code working fine in local and rendering selected experience fragment.

However the same code producing "404 custom error handler" in DEV environment, if I take out data-sly-resource code and have some dummy text, it is working fine.

Thing is, all the experience fragments exists in DEV author and author produces 404 with actual-page.html in network tab as well on page. <web-modal> html is empty.

<web-modal
  style="position: fixed"
  data-sly-test="${properties.fragmentPath}"
>
  <sly
    data-sly-resource="${@path=properties.fragmentPath,
   selectors='content', wcmmode='disabled'}"
  ></sly>
<web-modal>

It has been for a while, I tried to figure out this issue, there is no useful information available in logs, except 404.

[BrianKasingli · Accepted solution]

Hi there, 

From the looks of your code, seems like you are trying to render an experience fragment via data-sly-resource. Funny thing if I wrote about this topic back in 2022, https://sourcedcode.com/blog/aem/dynamically-include-an-experience-fragment-in-sightly

However, from you getting 404, its something not found, what's the properties.fragmentPath value? please make sure it points to a variation like master.html, /content/experience-fragments/mysite/en/header/master


As a test, making sure your code snippet is working as expected, you can hardcode a value in your local development environment and test to see how the component renders, hard code the @path like this.

<sly data-sly-resource="${@path='/content/experience-fragments/we-retail/equipment/master',
   selectors='content', wcmmode='disabled'}"></sly>

[Umesh_Thakur]

Hi @sreenu539 ,

First see "properties.fargementPath" is available or not in the component node and make sure it is returning proper XF path if it is fine then check the rendering of the xf with selector in view as published mode of the page.. these are some step will help to figure out the issue.

Hope this helps

Umesh Thakur

[arunpatidar]

Hi @sreenu539 

Could you please check the error logs?

Although it works locally, the syntax seems odd. Please review the syntax below to avoid potential errors.

Example: 1

<sly data-sly-test="${properties.fragmentPath}">
        <sly data-sly-resource="${properties.fragmentPath @ resourceType='cq/experience-fragments/components/experiencefragment', selectors='content', wcmmode='disabled'}"/>
    </sly>

Example 2

<web-modal style="position: fixed" data-sly-test="${properties.fragmentPath}">
  <sly data-sly-resource="${properties.fragmentPath @ selectors='content', wcmmode='disabled'}"></sly>
</web-modal>