All .js & .css (.vm) rendered twice on search issue page

Jira Development Jira Server
1

We have a Jira server app named “UpRaise for Employee Success”.
In this app, we have added a web-panel on Jira issue details page.
We have noticed our page is rendered twice on the “search” issue page.
So, all js and CSS are loaded twice, as well as initial calls made from react to fetch data to show in our web panel, are fired twice.
Steps to reproduce this issue,

  1. Go to “Issues → Search for issues” and click on any issue in the search result on left-hand panel
  2. Check network response all js and CSS are rendered once e.g vendors~app.8339f357.chunk.css
  3. Then click on other issue & again click on the first issue then observer vendors~app.8339f357.chunk.css rendered twice
    Please note that this issue is not reproducible from the issue details page. The problem is only with the search issue page.
2

Are you using wrm-webpack-plugin? Could you give more details about your setup, how exactly are you loading these resources?

3

Hi,
we use react and not using wrm-webpack-plugin
however this problem is reproducible even without react
We use .vm file to render the web panel. below is minimum code in .vm file, using which we reproduced it. (just a css file and a div)

<link href="$resourcesPath/static/css/css-reset.min.css" rel="stylesheet">
<div>
UpRaise pannel
</div>

We are using spring boot. in atlassian-plugin.xml we are using below configuration to load the panel

<web-panel key="issue_details_web_panel${addon.key}"
		location="atl.jira.view.issue.left.context" weight="300">
		<context-provider
			class="com.amoeboids.apps.server.jira.controllers.IssueDetailsContextProvider" />
		<resource name="view" type="velocity"
			location="/templates/com/amoeboids/apps/pages/server_issue_details.vm" />
		<label
			key="com.amoeboids.apps.garrison.issue.details.webitem.name">UpRaise</label>
		<conditions type="AND">
			<condition
				class="com.atlassian.jira.plugin.webfragment.conditions.UserLoggedInCondition" />
			<condition
				class="com.amoeboids.apps.server.jira.conditions.HasIssueDetailsPermission" />
			<conditions type="OR">
				<condition
					class="com.amoeboids.apps.server.jira.conditions.IsFeatureEnabled">
					<param name="feature">okr_enabled</param>
				</condition>
				<condition
					class="com.amoeboids.apps.server.jira.conditions.IsFeatureEnabled">
					<param name="feature">feedback_enabled</param>
				</condition>
			</conditions>
			<condition
				class="com.amoeboids.apps.server.jira.conditions.HasApplicationAccess" />
		</conditions>
	</web-panel>

Hope this helps

4

Hi,
Do you see any issue in the way we are loading this resource?

Thanks
Shiv

5

If you load it this way, browser will try to download it every time the .vm content is rendered.
The proper way to load resources is using <web-resource> or using atlassian-webresource-webpack-plugin (which will create <web-resource>s behind the scene).

Also note that Jira provides jira.webresources:react-16.8 and jira.webresources:react-dom-16.8
You can add this as dependency and avoid having to ship your own React.