"app" not defined error in custom app

I have created a custom app for freshdesk which loads on sidebar.

App works on my local but on publishing i am getting following error

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!`;
  }
}

@Freddy Can you give a solution for this

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:

  1. 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>
    
  2. 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(

Hi Gopi,

Solution given didn’t work, it broke my working local code as well.

Hi @rojin,

Welcome to the Freshworks Developer Forum!

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?

Hi @rojin ,

By onreadystatechange, were you referring to the usage of the following code snippet,

document.onreadystatechange = function () {
    if (document.readyState === "complete") {
      app.initialized()
          .then(function (_client) {
              client.events.on("app.activated", TicketChange);
          })
          .catch(function () {
              client.interface.trigger("showNotify", { type: "danger", message: "Failed to load 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.

Hi @Jayanth_Kumar,

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).

Hi @rojin,

Have you noticed this line in @Jayanth_Kumar’s reply?

if (document.readyState === "complete") {

Adding this might solve the dependency loaded before executing this code.

Apart from getting this error in the console, is there any other issue with the app, or does it work fine afterward? Does any client method fail?

@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.

There are few other errors as well.

.

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.