"app is not defined" Error in Sidebar App

App Platform
, , ,
1

Hi All,

I have developed a sidebar app, and it is mostly working as expected. However, there are instances when the app fails to work and displays an “app is not defined” error.

Here’s the code snippet I used to initialize the app:

document.addEventListener("DOMContentLoaded", function () {
  app.initialized().then((_client) => {
    window.client = _client;
    client.events.on('app.activated',
      () => {
        renderApp();
      },
      (error) => {
        handleErr(error);
      });
  }).catch(function (error) {
    handleErr(error);
  });
});

Screenshot 2023-07-17 at 9.53.18 AM
Screenshot 2023-07-17 at 9.53.18 AM718×172 39.2 KB

Upon encountering the “app is not defined” error, refreshing the page seems to resolve the issue, and the app starts working again. However, this is only a temporary workaround, and I would like to find a permanent solution.

Thank you in advance for your support!

3

Hi @Akhil_Moningii,

It might happen because the appclient script is not properly loaded before rendering your JavaScript file in the sidebar location. The order of the imports and whether they are async matters here.

Could you share the head section of the HTML file of the sidebar location and the code where the other scripts loaded in any other part of the HTML file?

For example, this order works fine for me.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>A Template App</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>
    <p>hello</p>
</body>

</html>
4

Hi @Raviraj ,

Thanks for your response. Here is my HTML file code:

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Auto populate app</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="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>

  <body>
   <p>hello</p>
  </body>

  <script defer src="scripts/app.js"></script>
</html>
5

@Akhil_Moningii Could you move up the import statement for app.js to the last line within the head section?
Also, can you replace the fresh_client.js script import statement with <script async src="{{{appclient}}}"></script> as I have done?

6

can you try this :point_up: along with what @Raviraj said?

1 Like
7

Thanks @Raviraj @Santhosh Both changes have been incorporated and redeployed the app. Awaiting the feedback from the customer.

1 Like
8

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