"ticket_top_navigation" app fails to open

App Platform
, ,
1

I’ve developed a custom “ticket_top_navigation” placeholder app that displays a dialog using showDialog(). It works fine in the development environment. However after publication to production the dialog fails to open. At one point it ran successfully in chrome but not firefox. Currently the dialog fails to launch in either browser. The only error in the console is the following:

TypeError: Cannot read properties of null (reading 'parentNode')
    at HTMLElement.handleUnpreparedAnnotatable (freshconnect-sidebar-core.js:4093:73)
    at HTMLDocument.i (vendor-8cbb381197009…5c1eae1.js:17111:52)

However that error also appears in the console when running under the development environment.

Note others have reported similar problems but no solution is provided:

2

No response. The problem still persists.

3

For those experiencing this problem, the template code generated by the FDK creates buggy code. The problem is due to the use of ‘async’ in the scripts tag and the omission of the script that defines the app client. Here is the index.html that resolves the problem:

<!DOCTYPE html>

<html lang="en">
  <head>
    <title>Custom 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 defer type="module" src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.esm.js"></script>
    <script defer nomodule src="https://cdn.jsdelivr.net/npm/@freshworks/crayons@v4/dist/crayons/crayons.js"></script>
    <script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>
    <script defer src="{{{appclient}}}"></script>
    <script defer src="scripts/app.js"></script>
    <link rel="stylesheet" type="text/css" href="styles/style.css" />
  </head>
</html>

Note that the FDK omits:

<script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script>

Note also that I removed ‘async’ and used ‘defer’. ‘defer’ preserves script order whereas ‘async’ does not. The following post was a hint as well as a github example.

I also followed the github example and omitted ‘async’ and ‘defer’ from the script tags in the modal view.

Now when I click the “ticket_top_navigation” button the modal dialog opens without fail (albeit with expected delays due to requests required for populating fields in the dialog).

4

Hi @Don_Bigler,

Actually, we have replaced the fresh_client.js file with the dynamic script file with this line:

<script defer src="{{{appclient}}}"></script>

It will automatically load the latest version of the script for enhanced features of the platform rather than sticking to a particular version.
So, you don’t have to load the “https://static.freshdev.io/fdk/2.0/assets/fresh_client.js” script.

The issue is mainly caused by the order of the scripts placed in the HTML file and the usage of the async and defer keywords. The appclient script should load before your app.js script is loaded. If that fails, the app will not initialize or misbehave, saying the app is not available.

If you can achieve this, whatever way works fine. You can also refer to this sample app for the appropriate way to load both scripts.

5

I’ve confirmed that removing <script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script> the app functions as intended. Odd. In my testing I was getting client not defined errors in the console without <script defer src="https://static.freshdev.io/fdk/2.0/assets/fresh_client.js"></script> with the same script ordering and defer that I showed in index.html.