i have made “DOMContentLoaded” and onreadystatechange change as well which were suggested in other discussions. Also changed script loading behavior(async/defer)
This Is the current code which works on my local.
index.html code
<!DOCTYPE html>
<html lang="en">
<head>
<title>ELves Order Details</title>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script async src="{{{appclient}}}"></script>
<link rel="stylesheet" type="text/css" href="styles/style.css" />
<script type="module"
src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>
<script nomodule
src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"></script>
<script defer src="scripts/app.js"></script>
</head>
<body>
<div class="main">
<p></p>
<p id="apptext"></p>
<p>
You have to be logged in on Elves separately to view the order details.
</p>
</div>
</body>
</html>
app.js code
var client;
document.addEventListener("DOMContentLoaded", function () {
app.initialized().then(
function (_client) {
window.client = _client;
client.events.on("app.activated", renderText);
},
function (err) {
console.error(err);
}
);
});
async function renderText() {
const textElement = document.getElementById("apptext");
const { ticket } = await client.data.get("ticket");
const order_number = ticket?.custom_fields?.order_number;
if (!isNaN(order_number)) {
const aTag = document.createElement("a");
aTag.setAttribute(
"href",
`https://****/elves/configure/orderdetails?radio_type=1&search_add=select&radiovalues=&order_id=${order_number}&fetch_order=Submit`
);
aTag.setAttribute("target", `_blank`);
aTag.innerText = "Elves Order Details";
textElement.appendChild(aTag);
} else {
textElement.innerHTML = `Looks like the order number is invalid!`;
}
}
Hi Gopi, I understand that the “app” not defined error is causing issues in your custom Freshdesk app. Based on the provided code, I recommend the following steps to resolve the issue:
Remove the async attribute from the {{{appclient}}} script tag in index.html. This will make sure that the required app object is loaded before executing the app.js script.
Change this line:
<script async src="{{{appclient}}}"></script>
To:
<script src="{{{appclient}}}"></script>
In app.js, wrap the entire code in an IIFE (Immediately Invoked Function Expression) to ensure proper execution and prevent variables from leaking into the global scope:
(function () {
var client;
document.addEventListener("DOMContentLoaded", function () {
app.initialized().then(
function (_client) {
window.client = _client;
client.events.on("app.activated", renderText);
},
function (err) {
console.error(err);
}
);
});
async function renderText() {
const textElement = document.getElementById("apptext");
const { ticket } = await client.data.get("ticket");
const order_number = ticket?.custom_fields?.order_number;
if (!isNaN(order_number)) {
const aTag = document.createElement("a");
aTag.setAttribute(
The app works fine without the error in my local and as a custom app with your provided code.
Could you confirm if the issue is from this app only? I doubt that you might have another app, and the error could be from it.
You can click on the app.js link in the right corner of the error and see the source file code. Could you verify if the code is the same as your app?
Even myself encountered similar issue of the app throwing “App is not defined” error, but the error isn’t consistent and it is sporadic, Is it consistent issue for your app or sporadic ?
And kindly let me know even after using the above workaround, still the issue persist ?
@Raviraj This issue is faced by many users and it is not consistent as I have mentioned earlier it’s sporadic. Is it something to do with how the CDN provides the app client, asking since we have noticed this issue was occurring mostly in the networks with slow speeds and high latency.
I have tried with onreadystatechange and DOMContentLoaded.
The issue was sporadic during local development, but it is now consistent upon publishing.
@Raviraj As previously mentioned, I am encountering this issue on the published app where only one instance is running (I have verified the code in the script).
@Raviraj I DID notice the line and I ll reiterate again, I have tried all the loading behaviour before seeking help here . Below is the screenshot for the same.
