JS Conflict/Collision with Jira Server while using Babel/Webpack

Jira Development
, ,
1

I am currently in the process of attempting to convert an existing Jira Cloud addon to a Jira Server addon.

In an effort to share as much code as possible across the two I’ve taken an architectural approach of making a new directory in my Jira Server project where I have a node/babel/webpack project (same as my Cloud addon) that bundles JS. The thought is that I will copy over JS from my Cloud addon and try and reuse as much as possible using the Jira Server REST API.

I have succeeded in implementing this but have run into an issue. My bundled JS makes it onto the Jira dashboard but it seems like the default babel JS that is included in any bundle causes conflicts with Jira’s JS on the page - specifically moment.js.

If I were to not use babel/webpack, my code would end up drastically diverging from the Cloud addon, rendering the whole approach mostly useless.

Has anyone run into this issue before? Is there a way to namespace or isolate the babel bundle code so it doesn’t conflict with Jira’s built-in JS? Maybe there is a better architectural approach that I’m unaware of?

1 Like
2

Fernando’s post here might be relevant to what you are reporting: https://community.developer.atlassian.com/t/project-settingss-sidebar-broken-jira-p2-and-react/20982

3

I suggest you to introduce iframes if it suits you. Sure it adds one extra request but by doing so you should be able to have the common layout, JS + CSS files for cloud and server versions. For me it saves a lot of time and effort.

4

I also used the iframe approach without too much trouble. It would be nice, if Atlassian provides some sort of compatibility JS library that re-implements things available through AP for Server. I ended up re-implementing many of the JS things in AP myself using AJS.