Vue.js app is randomly blank on Issue view right context sidebar

Jira Development Jira Cloud
,
1

Hi!
I have a simple cloud app, built with Vue.js. It uses the recommended structure for the index.html file (as pasted below).
The problem is that when opening the sidebar, it is entirely blank some times. Randomly. No apparant trigger for it, no console errors. Resizing the window manually does nothing. Only refreshing the entire page might work.

When inspecting the HTML, the app iframe is loaded fine, but its size is 0. Manually altering the width or height of the iframe does the trick and the app is perfectly usable.
Having a timeout inside the app with a window.AP.resize() on loop, makes the issue less apparent, but it is by no means a good nor solid solution, the app is blank anyways at random times.

Here is the app’s template:

<!DOCTYPE html>
<html>
  <head>
    <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 src="https://connect-cdn.atl-paas.net/all.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div class="ac-content">
      <div id="my-jira-app">
        <div id="app"></div>
      </div>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>

And this is the section of the atlassian-connect.json

    "modules": {
        "webPanels": [
            {
                "url": "/index.html",
                "location": "atl.jira.view.issue.right.context",
                "layout": {
                    "width": "100%",
                    "height": "100%"
                },
                "weight": 1,
                "name": {
                    "value": "my jira app"
                },
                "key": "myjiraapp",
                "cacheable": true
            }
        ],

Any ideas on what am I missing for this to work properly?

2

Hi, did you ever figure out what the problem was?

3

You need to do a AP.resize in your Vue.js / React Code after the rendering is done. In case there are no further changes in size, one time may be enough.
What happens is that when AP initializes your dom may not have a size yet as Vue.js did not yet render anything. I would also recomment to wait for window.AP to be set on a small interval to make sure that you don’t try to access it before it’s ready

1 Like