Solved
How to access clientlibs in ui.apps from other js file in ui.frontend
Hello community
The code below needs to return an SVG from a folder within clientlibs in ui.apps. However, when I attempt to access it, it returns "<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML...."
This SVG will be located in the folder mysite/ui.frontend/src/main/webpack/resources/images, and when built, it generates the same SVG in mysite/ui.apps/src/main/content/jcr_root/apps/project/clientlibs/clientlib-site/resources/images.
When attempting to access directly in /apps in the local environment, it works. However, it does not work in the production environment.
I would like to better understand why this is happening and how I can access this folder using this method.
const iconsPath = '/src/main/webpack/resources/images';
export async function fetchSvg(value) {
if (!iconCache[value.htmlType]) {
const response = await fetch(`${iconsPath}/${value.htmlType}.html`);
const htmlContent = await response.text();
if (htmlContent) {
iconCache[value.htmlType] = htmlContent;
return { type: value.iconDataType, value: htmlContent };
} else {
throw new Error(`SVG for ${value.htmlType} not found in the HTML content`);
}
} else {
return { type: value.iconDataType, value: iconCache[value.htmlType] };
}
}